/* === ВСЕ СТИЛИ (полные, без изменений) === */
        /* ============================================================
           ВИЗУАЛЬНОЕ ОФОРМЛЕНИЕ (по присланному образцу) - только
           цвета/формы/тени ниже подогнаны под референс. Ничего в
           HTML/JS не менялось, структура и id/классы, на которые
           опирается код, остались прежними - это чисто визуальный
           проход поверх уже работающей вёрстки.
        ============================================================ */
        :root {
    /* ЕДИНЫЙ ЦВЕТ ПОДСВЕТКИ СТРОКИ ТАБЛИЦЫ.
       Раньше он был задан четырнадцатью разными значениями в разных
       местах: в одной таблице строка красилась одним оттенком, а
       соседняя - другим, и любое расхождение внутри строки читалось
       как «прямоугольник чужого цвета». Теперь цвет один, а тема его
       переопределяет (см. body.ui-themed ниже). */
    --row-hover: #e3f4f7;
            --accent: #55b5be;
            --accent-dark: #3f9aa3;
            --bg-app: #dcecf0;
            --card-radius: 20px;
            --card-shadow: 0 2px 8px rgba(0,0,0,0.06);
            --pill-radius: 30px;
            /* === НОВАЯ АКВАРЕЛЬНАЯ ПАЛИТРА (тестовый визуал, пока
               только на главной странице: фон, боковая панель, шапка,
               таблица сверки, статусы, счётчики) === */
            /* Правка 158 (её выбор 11.09.2026): основной фон - «бирюза мягче»,
               слева глубокая, к правому краю светлеет. Прежний голубой
               остался темой «Голубая (прежняя)» в личном кабинете. */
            --wc-c1: #0B6B82;
            --wc-c2: #3AA7BD;
            --wc-c3: #A9DCE6;
            --wc-red: #CF5B5B;
            --wc-orange: #CF955B;
            --wc-yellow: #CFCF5B;
            --wc-green: #5BCF5B;
            --wc-green-status: #5BCF95;
            --wc-teal: #5BCFCF;
            --wc-blue: #5B95CF;
            --wc-purple: #955BCF;
            --wc-text-main: #1e293b;
            --wc-text-sub: #475569;
            /* Фон стал темнее - «стекло» панели и окон чуть плотнее, чтобы
               кнопки и текст не терялись (правка 158). */
            --wc-glass: rgba(255,255,255,0.62);
            --wc-glass-strong: rgba(255,255,255,0.76);
            --wc-glass-hover: rgba(255,255,255,0.9);
            --base-font-size: 15px;
            --sidebar-bg: #f0f9fb;
        }
        * {
            box-sizing: border-box;
        }
        /* ИСПРАВЛЕНО (по замечанию - "шрифт на панели слева разный"):
           у элементов формы (button/input/select/textarea) браузер по
           умолчанию использует СВОЙ системный шрифт, а не тот, что
           задан для body - поэтому текст на кнопках визуально не
           совпадал с обычным текстом рядом (например с названием
           "FinMan" или именем пользователя). Стандартный сброс -
           заставляем их наследовать шрифт страницы, как и весь
           остальной текст. */
        button, input, select, textarea {
            font-family: inherit;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(140deg, var(--wc-c1) 0%, var(--wc-c2) 50%, var(--wc-c3) 100%);
            position: relative;
        }
        /* Акварельные пятна поверх основного градиента - размытые,
           фиксированные, не мешают прокрутке и не перехватывают клики. */
        body::before, body::after {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            mix-blend-mode: soft-light;
        }
        body::before {
            background:
                radial-gradient(circle at 18% 22%, rgba(255,255,255,0.6) 0%, transparent 45%),
                radial-gradient(circle at 82% 12%, rgba(255,255,255,0.4) 0%, transparent 40%);
            filter: blur(12px);
        }
        body::after {
            background: radial-gradient(circle at 70% 82%, rgba(120,162,191,0.5) 0%, transparent 55%);
            filter: blur(20px);
        }
        /* ЛИЧНЫЙ КАБИНЕТ - своя картинка фона (из галереи или
           загруженная) заменяет акварельный градиент во всём
           приложении. --custom-bg-image ставится через JS
           (profile.js: applyBackground) на сам <body>. Акварельные
           пятна (::before/::after выше) отключаем, чтобы не портили
           выбранную картинку своим blend-режимом. */
        body.has-custom-bg {
            background-image: var(--custom-bg-image);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        body.has-custom-bg::before,
        body.has-custom-bg::after {
            display: none;
        }
        .container {
            background: white;
            padding: 25px;
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid #e9eef4;
        }
        h1 {
            color: #1a2634;
            border-bottom: 3px solid var(--accent);
            padding-bottom: 10px;
            margin-top: 0;
        }
        .file-input {
            flex: 1;
            min-width: 200px;
            padding: 15px;
            border: 2px dashed #bdc3c7;
            border-radius: 8px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .file-input:hover {
            border-color: #3498db;
            background: #ecf0f1;
        }
        .file-input label {
            display: block;
            cursor: pointer;
            font-weight: bold;
            color: #2c3e50;
        }
        .file-input input {
            display: none;
        }
        .file-status {
            font-size: 14px;
            color: #1a2634;
            margin-top: 5px;
        }

        .options {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
        }
        .btn {
            padding: 10px 22px;
            border: none;
            border-radius: var(--pill-radius);
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }
        .btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.14);
        }
        .btn:active:not(:disabled) {
            transform: translateY(0);
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }
        .btn-primary {
            background: var(--accent);
            color: white;
        }
        .btn-primary:hover:not(:disabled) {
            background: var(--accent-dark);
        }
        /* Правка 160 (её выбор 11.09.2026): кнопки «в тон» бирюзовому фону -
           яркая бирюзовая кнопка сливалась с фоном. */
        .btn-success {
            background: #2EBF7A;
            color: white;
        }
        .btn-success:hover:not(:disabled) {
            background: #27a86a;
        }
        .btn-warning {
            background: #F2A93B;
            color: white;
        }
        .btn-warning:hover:not(:disabled) {
            background: #dd9530;
        }
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        .btn-danger:hover:not(:disabled) {
            background: #c0392b;
        }
        .btn-secondary {
            background: #95a5a6;
            color: white;
        }
        .btn-secondary:hover:not(:disabled) {
            background: #5a6472;
        }
        .btn-purple {
            background: #8e44ad;
            color: white;
        }
        .btn-purple:hover:not(:disabled) {
            background: #7d3c98;
        }
        .btn-info {
            background: #0B5C6E;   /* правка 160: глубокая бирюза */
            color: white;
        }
        .btn-info:hover:not(:disabled) {
            background: #084553;
        }
        .btn-dark {
            background: #2c3e50;
            color: white;
        }
        .btn-dark:hover:not(:disabled) {
            background: #1a252f;
        }
        .btn-view {
            background: #137A8C;   /* правка 160 */
            color: white;
        }
        .btn-view:hover:not(:disabled) {
            background: #0F6272;
        }
        .btn-org-mismatch {
            background: #e67e22;
            color: white;
        }
        .btn-org-mismatch:hover:not(:disabled) {
            background: #d35400;
        }
        .btn-calendar {
            background: #8e44ad;
            color: white;
        }
        .btn-calendar:hover:not(:disabled) {
            background: #7d3c98;
        }
        .btn-orgs {
            background: #20374A;   /* правка 160 */
            color: white;
        }
        .btn-orgs:hover:not(:disabled) {
            background: #172a39;
        }
        /* «Банк» был набран 17px - крупнее соседей; выровнен по её
           ответу 20.09.2026 (правка 319). */
        .balance-cell-green {
            background: #eafaf1;
            color: #196f3d;
        }
        tr.cash-row-explained {
            background: #a9e8c1 !important;
        }
        /* Поле "Пояснение" в кассе - явная зелёная подсветка, как
           только в нём что-то введено (реагирует по мере набора
           текста, см. markCashExplanationFilled в bank.js). */
        .cash-explanation-input.filled {
            background: #d5f5e3;
            border: 2px solid #27ae60 !important;
            font-weight: 600;
        }
        .cash-filter-row th {
            padding: 3px 6px;
        }
        .cash-filter {
            width: 100%;
            padding: 3px 5px;
            font-size: 14px;
            border: 1px solid #dcdcdc;
            border-radius: 4px;
        }
        .pair-info-clickable {
            cursor: pointer;
            text-decoration: underline dotted;
        }
        .pair-info-clickable:hover {
            background: #eaf4fd;
        }
        /* ПОЛЯ И КНОПКИ ЗАНИМАЮТ ЯЧЕЙКУ ЦЕЛИКОМ (по правке - «много
           пустот»). Раньше ширину задавал min-width: 110px, а
           width: 100% гасился рамкой и отступами (box-sizing по
           умолчанию считает их СВЕРХ ширины) - поле выходило уже
           ячейки, и справа оставалась пустота. Теперь box-sizing:
           border-box, min-width: 0 - поле честно во всю ширину. */
        /* ============================================================
           ГЛАВНЫЙ ЭКРАН НА ВРЕМЯ ЗАПУСКА.
           Он спрятан, чтобы не мелькать перед окном, которое
           откроется через мгновение. Но прятать его РАСПОРЯЖЕНИЕМ
           JAVASCRIPT оказалось опасно: если запуск обрывается
           ошибкой, показать экран уже некому - человек видит пустую
           страницу (именно это и случилось).
           Поэтому показ встроен в САМ CSS: экран появляется сам,
           без единой строчки кода. JavaScript может показать его
           раньше (класс main-booting снимается), но НЕ МОЖЕТ
           помешать ему появиться.

           ПОЧЕМУ ЗДЕСЬ НАДПИСЬ, А НЕ ПУСТОТА («обновляю задачник и
           на секунду мелькает сверка - убери уже её!»). Главный экран
           - это «Сверка списаний и поступлений». Пока грузятся данные,
           он и мелькал: сначала сверка, через миг поверх неё нужное
           окно. Теперь на это время содержимое экрана скрыто, а на
           его месте стоит спокойная надпись - и мелькать нечему.
           Срок увеличен с 2,5 до 6 секунд: возврат на место теперь
           ждёт загрузки данных, и на медленной связи 2,5 секунды
           истекали раньше, чем окно успевало открыться.
           ============================================================ */
        /* ПОДЛОЖКА ПУСТА (04.09.2026). Здесь стоял класс .main-behind,
           прятавший экран сверки под окнами. Он был нужен, пока
           подложкой была сама сверка. Теперь сверка - обычное окно
           (#reconciliationModal), а на подложке только знак программы,
           и прятать нечего.
           Знак стоит по центру и заметно бледнее содержимого окон:
           это фон, а не то, что надо читать. */
        .main-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            height: 70vh;
            opacity: 0.5;
            user-select: none;
        }
        .main-empty img {
            border-radius: 18px;
        }
        .main-empty-name {
            font-size: 34px;
            font-weight: 900;
            color: #3f9aa3;
            line-height: 1;
        }
        .main-empty-name span {
            color: #55b5be;
        }
        .main-empty-hint {
            font-size: 15px;
            font-weight: 600;
            color: #1a2634;
            letter-spacing: 0.5px;
        }

        .main-booting {
            position: relative;
            min-height: 220px;
        }
        .main-booting > * {
            visibility: hidden;
            animation: mainScreenReveal 0s linear 6s forwards;
        }
        .main-booting::after {
            content: 'FinMan — загружаю данные…';
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 18px;
            color: #7c8899;
            animation: bootNoteHide 0.2s linear 6s forwards;
        }
        @keyframes mainScreenReveal {
            to { visibility: visible; }
        }
        @keyframes bootNoteHide {
            to { opacity: 0; }
        }

        /* Правила старой таблицы договоров лизинга (.leasing-contracts-table,
           правки 166-300: ширина сеткой, отступы по 4px, приклеенная строка
           открытого договора) убраны правкой 377: с Z-04 договоры - список
           слева и карточка справа (#lzContractsBody .lz-md, .lz-fields,
           .lz-sched-table ниже). Растягивать кнопки в ячейках на всю
           ширину нельзя - правило доставало до крестиков в графике платежей.
           Квадратики остаются квадратиками. */
        /* Ящик договоров ездит вбок, если карточка не влезает по ширине. */
        #lzContractsBody { overflow-x: auto; }
        /* СХОДИМОСТЬ - маленький квадратик размера кнопки удаления:
           зелёная галочка, если остаток совпал с графиком платежей, и
           красный крестик, если нет. Цвет тут смысловой (как у
           «просрочено»), темой не перекрашивается. */
        .leasing-converge {
            display: inline-block;
            min-width: 26px;
            padding: 2px 8px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            line-height: 1.4;
            color: #fff;
            text-align: center;
            cursor: help;
        }
        .leasing-converge.ok { background: #27ae60; }
        .leasing-converge.bad { background: #e74c3c; }
        /* Значок внутри квадратика - рисунок, а не буква (см. leasing.js):
           перечёркнутая галочка знаками в Windows не рисовалась. */
        .leasing-converge .lz-conv-icon { display: block; margin: 0 auto; }
        .btn-deposit {
            background: #f1c40f;
            color: #2c3e50;
        }
        .btn-deposit:hover:not(:disabled) {
            background: #f39c12;
            color: white;
        }
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* ИСПРАВЛЕНО (по просьбе - "чтобы при нажатии кнопки было не
           модальное окно, а всё открывалось слева, как на первой
           странице"): раньше окно было тёмным полупрозрачным слоем
           НА ВЕСЬ экран (закрывало и панель слева тоже) - теперь оно
           начинается ПРАВЕЕ панели (280px) и просто занимает основную
           область справа, без затемнения - панель остаётся видна и
           кликабельна, ощущение "переключения раздела на месте", а
           не всплывающего окна поверх всего. Ни один onclick/id не
           менялся - это чисто позиционирование того же самого блока. */
        /* ИСПРАВЛЕНО ЕЩЁ РАЗ (по замечанию - "не модальное окно, а на
           всю оставшуюся страницу"): раньше содержимое было БЕЛОЙ
           КАРТОЧКОЙ с отступами/скруглением/тенью внутри области -
           выглядело как модалка, просто сдвинутая вбок. Теперь
           содержимое заполняет ВСЮ оставшуюся область целиком, без
           отступов и без вида "плавающей карточки" - как настоящая
           страница, а не окно. */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: var(--sidebar-w, 272px);
            top: 0;
            width: calc(100% - var(--sidebar-w, 272px));
            height: 100%;
            background: #fff;
            animation: fadeIn 0.3s;
        }
        .modal.active {
            display: flex;
        }
        .modal-content {
            /* ИЗМЕНЕНО (по правке - "сделай фон посветлее, как на левой
               панели"): раньше был тот же насыщенный градиент, что и
               на body, напрямую - заметно темнее/ярче, чем боковая
               панель (у неё поверх того же фона лежит полупрозрачное
               белое "стекло" - var(--wc-glass-strong)). Добавлена та
               же белая полупрозрачная заливка поверх градиента - тот
               же приём, что и в боковой панели, только тут ещё и
               поддержка своей фоновой картинки из личного кабинета. */
            background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
                        linear-gradient(140deg, var(--wc-c1) 0%, var(--wc-c2) 50%, var(--wc-c3) 100%);
            padding: 25px 32px;
            border-radius: 0;
            max-width: 100%;
            width: 100%;
            max-height: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: none;
            animation: none;
        }
        body.has-custom-bg .modal-content {
            background-image: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)), var(--custom-bg-image);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* ШАПКА ОКНА ПОНИЖЕ (её правка 09.09.2026: «максимально много
           строк должно быть видно»). 30 пикселей отступов вокруг
           заголовка - это почти целая строка таблицы на каждом
           экране. Заголовок остаётся крупным и читаемым, ужимаются
           только пустоты вокруг него. */
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 7px;
            margin-bottom: 8px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .modal-header h2 {
            margin: 0;
            color: #2c3e50;
        }
        .modal-close {
            background: none;
            border: none;
            font-size: 29px;
            cursor: pointer;
            color: #1a2634;
            transition: 0.3s;
        }
        .modal-close:hover {
            color: #e74c3c;
            transform: rotate(90deg);
        }
        .modal-body {
            overflow-y: auto;
            flex: 1;
            padding-right: 5px;
        }
        .modal-body::-webkit-scrollbar {
            width: 6px;
        }
        .modal-body::-webkit-scrollbar-thumb {
            background: #bdc3c7;
            border-radius: 3px;
        }
        .modal-footer {
            border-top: 2px solid #ecf0f1;
            padding-top: 15px;
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* таблицы для организаций */
        .org-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 15px;
        }
        .org-table th {
            background: #2c3e50;
            color: white;
            padding: 8px 6px;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 10;
            font-size: 14px;
        }
        .org-table td {
            padding: 6px 6px;
            border-bottom: 1px solid #ecf0f1;
            vertical-align: middle;
        }
        .org-table input,
        .org-table select {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 14px;
            background: transparent;
            transition: 0.3s;
        }
        .org-table input:focus,
        .org-table select:focus {
            border-color: #3498db;
            outline: none;
            background: white;
        }
        .org-table .btn-delete-row {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
        }
        .org-table .btn-delete-row:hover {
            background: #c0392b;
        }

        .table-toolbar {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            flex-wrap: wrap;
            align-items: center;
        }

        .tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid #ecf0f1;
            margin-bottom: 15px;
        }
        .tab-btn {
            padding: 8px 20px;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: bold;
            cursor: pointer;
            font-size: 17px;
            color: #1a2634;
            transition: 0.3s;
        }
        .tab-btn:hover {
            color: #2c3e50;
        }
        .tab-btn.active {
            color: #2c3e50;
            border-bottom-color: #3498db;
        }
        .tab-content {
            flex: 1;
            overflow-y: auto;
        }
        .tab-content.hidden {
            display: none;
        }
        .hidden {
            display: none !important;
        }

        /* СВОЙ ВЫПАДАЮЩИЙ СПИСОК К ПОЛЮ С ПОДСКАЗКАМИ (правка 336). Один
           на всю программу, висит под полем с курсором. */
        .doc-combo-box {
            position: fixed;
            z-index: 12000;
            background: #fff;
            border: 1px solid #c9d3dd;
            border-radius: 6px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
            max-height: 260px;
            overflow-y: auto;
            font-size: 14px;
            color: #17212f;
        }
        .doc-combo-item {
            padding: 6px 10px;
            cursor: pointer;
            white-space: nowrap;
        }
        .doc-combo-item:hover, .doc-combo-item.active {
            background: #eaf4fd;
        }
        .doc-combo-more {
            padding: 6px 10px;
            color: #7d879b;
            font-size: 14px;
        }

        /* календарь и прочее */
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            border: 1px solid #eee;
            background: #eee;
            font-size: 14px;
        }
        .calendar-cell {
            background: white;
            padding: 6px 8px;
            min-height: 110px;
            display: flex;
            flex-direction: column;
            position: relative;
            transition: background 0.2s;
        }
        .calendar-cell.overdue {
            background-color: #fee2e2 !important;
            border: 1px solid #fca5a5;
        }
        .calendar-cell.overdue .day-number {
            color: #b91c1c;
        }
        .calendar-cell-header {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 4px;
        }
        .day-number {
            font-size: 15px;
            font-weight: bold;
        }
        .day-number.weekend {
            color: #ef4444;
        }
        .day-number.current {
            color: #3b82f6;
            background: #eff6ff;
            padding: 0 5px;
            border-radius: 3px;
            border: 1px solid #60a5fa;
        }
        .week-header {
            background: white;
            text-align: center;
            padding: 8px 0;
            font-weight: bold;
            color: #555;
            font-size: 14px;
        }
        .empty-cell {
            background: white;
        }
        .cell-content {
            font-size: 14px;
            margin-top: 2px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            flex: 1;
        }
        .cell-row {
            display: flex;
            justify-content: space-between;
            line-height: 1.3;
        }
        .cell-row.blue {
            color: #2563eb;
        }
        .cell-row.red {
            color: #dc2626;
        }
        .cell-row.total {
            border-top: 1px dashed #ccc;
            padding-top: 3px;
            margin-top: 3px;
            font-weight: bold;
        }
        .cell-actions {
            margin-top: 4px;
            font-size: 14px;
            color: #3b82f6;
            cursor: pointer;
            text-decoration: underline;
            text-align: right;
        }
        .cell-actions.paid {
            color: #16a34a;
            text-decoration: none;
        }

        .calendar-controls {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
            margin-bottom: 15px;
            padding: 12px 16px;
            background: #f4f6f8;
            border-radius: 6px;
        }
        .calendar-controls .nav-btn {
            padding: 6px 14px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            transition: 0.2s;
        }
        .calendar-controls .nav-btn:hover {
            background: #e5e7eb;
        }
        .calendar-controls .month-title {
            font-size: 21px;
            font-weight: bold;
            min-width: 140px;
            text-align: center;
        }
        .calendar-controls label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
        }
        .calendar-controls input[type="number"] {
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100px;
            font-size: 14px;
        }
        .calendar-controls .toggle-btn {
            padding: 6px 16px;
            background: #fff;
            border: 1.5px solid #e0e6ea;
            cursor: pointer;
            border-radius: var(--pill-radius);
            color: #1f2a3e;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s;
        }
        .calendar-controls .toggle-btn:hover {
            border-color: var(--accent);
            background: #f7fcfe;
        }
        .calendar-controls .add-btn {
            padding: 6px 16px;
            background: #fff;
            border: 1.5px solid #e0e6ea;
            cursor: pointer;
            border-radius: var(--pill-radius);
            color: #1f2a3e;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s;
        }
        .calendar-controls .add-btn:hover {
            border-color: #27ae60;
            background: #eafaf1;
        }
        .calendar-controls .clear-btn {
            padding: 6px 16px;
            background: #fff;
            border: 1.5px solid #e0e6ea;
            cursor: pointer;
            border-radius: var(--pill-radius);
            color: #1f2a3e;
            font-weight: 600;
            font-size: 14px;
            transition: 0.2s;
        }
        .calendar-controls .clear-btn:hover {
            border-color: #e74c3c;
            background: #fdecea;
        }

        .payment-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
            font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .payment-table th {
            background: #fff;
            color: #1f2a3e;
            padding: 5px 8px;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 10;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            border-bottom: 2px solid #e6ecf3;
        }
        /* ИЗМЕНЕНО (по замечанию - "кнопка платёжный календарь -
           измени тёмное окно на такое же светлое, как на 1 странице"):
           строка фильтров под шапкой была тёмно-синей - теперь того же
           светлого тона, что и остальной сайт. */
        /* ЗАКРЕПЛЕНИЕ этой строки задаётся ниже по файлу, в блоке
           "ЗАКРЕПЛЁННАЯ ШАПКА платёжного календаря" - там отступ сверху
           берётся из реально измеренной высоты строки заголовков.
           Прежнее жёсткое top: 28px убрано отсюда: оно не совпадало с
           настоящей высотой, и строка поиска наезжала на заголовки. */
        #paymentFilterRow th {
            background: #f4f7fa;
            padding: 3px;
        }
        #paymentFilterRow input,
        #paymentFilterRow select {
            box-sizing: border-box;
            border-radius: 3px;
            border: 1px solid #dce7ea;
            background: #ffffff;
            color: #2c3e50;
        }
        /* ИЗМЕНЕНО (по просьбе - "ничего не видно, крупнее шрифт"):
           текст в ячейках теперь ПЕРЕНОСИТСЯ на следующую строку, если
           не помещается, а не обрезается невидимо - раньше длинное
           название/назначение платежа могло стать полностью нечитаемым. */
        /* ПЛОТНЕЕ - ЧТОБЫ ВЛЕЗАЛО БОЛЬШЕ СТРОК (её правка 09.09.2026:
           «сделай как было - максимально много строк должно быть
           видно»). Финансист смотрит на таблицу целиком; каждая
           лишняя пара пикселей в строке - это минус строка на экране.
           Уменьшены отступы ячеек и высота полей ввода; размер шрифта
           НЕ трогаем - читаемость важнее ещё одной строки. */
        .payment-table td {
            padding: 2px 6px;
            border-bottom: 1px solid #ecf0f1;
            vertical-align: middle;
            white-space: normal;
            word-break: break-word;
        }
        /* Правка 166 (её снимок 11.09.2026: «буквы… стираются снизу»): в 28px
           с отступами 5px текст 15px не помещался - нижняя часть букв в
           списках обрезалась. 30px и отступ 2px по вертикали. */
        .payment-table input,
        .payment-table select,
        .payment-table textarea {
            width: 100%;
            height: 30px;
            box-sizing: border-box;
            padding: 2px 7px;
            line-height: 24px;
            border: 1px solid #d5dbdb;
            border-radius: 5px;
            font-size: 15px;
            font-family: inherit;
            background: #ffffff;
            transition: border-color 0.2s, background 0.2s;
            text-overflow: ellipsis;
        }
        .payment-table textarea {
            resize: vertical;
            min-height: 34px;
        }
        .payment-table input[type="text"],
        .payment-table input[type="number"] {
            white-space: nowrap;
            overflow: hidden;
        }
        .payment-table input:focus,
        .payment-table select:focus,
        .payment-table textarea:focus {
            border-color: #3498db;
            outline: none;
            background: white;
        }
        .payment-table input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #27ae60;
        }
        .payment-table .btn-delete-row {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
        }
        .payment-table .btn-delete-row:hover {
            background: #c0392b;
        }
        .payment-table tr.overdue-row {
            background-color: #fee2e2 !important;
            border-left: 3px solid #dc2626;
        }
        /* СМЫСЛОВЫЕ строки (просрочено, дубликат, оплачено) сохраняют свой
   цвет и при наведении, и в любой теме: красный здесь значит
   «просрочено», а не «оформление». Их подсветка под мышью - в конце
   файла, в блоке «СТРОКА ПОД МЫШЬЮ - ЦВЕТОМ» (правка 296): тот же цвет,
   чуть гуще. Прежние правила здесь (#fecaca, #ffe8a1) убраны - они
   красили СТРОКУ, а новые красят ячейки поверх неё, и два разных
   «цвета под мышью» для одной строки только путали. */
        .payment-table tr.duplicate-row {
            background-color: #fff3cd !important;
            border-left: 3px solid #f39c12;
        }

        /* прочие старые стили */
        /* ИЗМЕНЕНИЕ: раньше был flex + flex-wrap - поля "плавали" и
           переносились в разных местах у разных контрагентов (длинное
           название сдвигало все поля правее). Теперь grid с фиксированными
           колонками - все поля стоят строго друг под другом независимо
           от длины названия контрагента. Колонки соответствуют порядку
           элементов, которые строит renderContractorList() в contractors.js:
           название | бейдж | статус | статья | ответственный | телефон |
           email | кол-во док. | сумма. */
        .contractor-item {
            display: grid;
            /* ПРАВКА - "сократи Тип и Email, добавь Комментарий за
               Email, сделай столбики можно двигать по ширине": ширины
               теперь читаются из CSS-переменной --contractor-grid-cols
               (задаётся в JS - см. applyContractorColumnWidths в
               contractors.js), значение по умолчанию ниже совпадает с
               исходным - если переменная ещё не установлена (например,
               до первой отрисовки), сетка не "прыгает". Порядок теперь:
               Контрагент, ЭДО, Статус(уже), Статья, Ответственный,
               Телефон, Email(уже), Комментарий(новое), Кол-во, Сумма. */
            /* Правка 140: осталось три столбца - Контрагент, ЭДО, Статус. */
            grid-template-columns: var(--contractor-grid-cols, 320px 160px 160px 190px);
            align-items: center;
            column-gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            margin-bottom: 6px;
            background: #f8f9fa;
            transition: 0.3s;
            border-left: 4px solid #3498db;
        }
        .contractor-item:hover {
            background: #ecf0f1;
        }
        /* Общий контейнер прокрутки списка контрагентов: и вправо
           (когда столбцов больше, чем влезает), и вниз. Шапка и
           строка фильтров прилипают к верху, чтобы при прокрутке
           длинного списка было видно, что где. */
        .contractor-scroll {
            flex: 1;
            min-height: 0;
            overflow: auto;
        }
        /* ИСПРАВЛЕННАЯ ОШИБКА ("сломал столбики"): "тянуться по
           содержимому" нужно ТОЛЬКО строкам основного списка, где
           ширины столбцов заданы в пикселях. Раньше это правило стояло
           на общем .contractor-item - и цепляло вкладку "Заполни
           данные", у которой колонки заданы долями (1.6fr 1fr ...). При
           width:max-content доли схлопываются по содержимому, поэтому
           поля разъезжались с шапкой: "Тип" оказывался под "Статьёй",
           телефон с почтой уезжали за экран.
           Теперь правило действует только внутри контейнера прокрутки
           основного списка. */
        .contractor-scroll .contractor-item {
            width: max-content;
            min-width: 100%;
        }
        .contractor-item-header {
            position: sticky;
            top: 0;
            z-index: 3;
            background: #eef2f5;
            border-left-color: #5a6472;
            font-size: 14px;
            font-weight: bold;
            color: #1a2634;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .contractor-item-header:hover {
            background: #eef2f5;
        }
        .contractor-item .name {
            /* Без жирного (правка 174, её правка 11.09.2026: «убери везде
               жирный шрифт с контрагентов»). */
            font-weight: 400;
            color: #2c3e50;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .contractor-item .count {
            font-size: 14px;
            color: #1a2634;
        }
        .contractor-item select,
        .contractor-item input[type="text"],
        .contractor-item input[type="email"] {
            width: 100%;
            padding: 4px 8px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            font-size: 14px;
            background: white;
            box-sizing: border-box;
        }
        .contractor-item select {
            cursor: pointer;
        }
        .contractor-item .badge {
            font-size: 14px;
            padding: 2px 10px;
            border-radius: 12px;
            background: #ecf0f1;
            color: #1a2634;
        }

        .progress-bar {
            width: 100%;
            height: 25px;
            background: #ecf0f1;
            border-radius: 12px;
            overflow: hidden;
            margin: 10px 0;
            display: none;
            position: relative;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            transition: width 0.5s;
            width: 0%;
        }
        .progress-text {
            position: absolute;
            width: 100%;
            text-align: center;
            line-height: 25px;
            font-weight: bold;
            font-size: 15px;
            color: #2c3e50;
        }
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            font-size: 17px;
            color: #3498db;
        }
        .error {
            color: #e74c3c;
            background: #fde8e8;
            padding: 10px;
            border-radius: 6px;
            margin: 10px 0;
            display: none;
        }
        .table-wrapper {
            overflow-x: auto;
            margin-top: 20px;
            max-height: 600px;
            overflow-y: auto;
            border: 1px solid #ecf0f1;
            border-radius: 8px;
        }
        /* Главная таблица сверки (#results) - новый акварельный вид.
           Скоуп на #results специально, чтобы НЕ трогать таблицы в
           остальных модалках (контрагенты, счета, лизинг и т.д.) -
           это тестовый визуал только для первой/главной страницы. */
        /* ПРАВКА - "пусть все строки будут белые, а при наведении
           подсвечиваются серо-голубым": раньше .white-block вокруг
           таблицы был полупрозрачным (var(--wc-glass)), и через него
           просвечивал голубой фон страницы - из-за этого все строки
           КАЗАЛИСЬ серо-голубыми постоянно, а не только при
           наведении. Теперь именно для #results этот блок сплошной
           белый, а серо-голубой цвет остаётся только как ховер. */
        #results .white-block {
            background: #fff;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #results .table-wrapper {
            border: none;
            border-radius: 4px;
        }
        #results th {
            /* ИСПРАВЛЕНО (по правке - "поле с фильтрами становится
               прозрачным при прокрутке"): шапка таблицы прилипающая
               (position: sticky; top:0 - см. общее правило th ниже),
               а тут фон был transparent - из-за этого при скролле
               сквозь неё было видно уезжающие вверх строки. Теперь
               непрозрачная, как и сама карточка таблицы. */
            background: #fff;
            text-transform: none;
            letter-spacing: normal;
            font-size: 14px;
            border-bottom: 1px solid rgba(30,41,59,0.12);
        }
        #results td {
            border-bottom: 1px solid rgba(30,41,59,0.08);
        }
        #results tr:nth-child(even),
        #results tr:nth-child(odd) {
            background: transparent;
        }
        /* ИСПРАВЛЕНО ЕЩЁ РАЗ (по скриншоту - "белый кусок на выделенной
           строке всё ещё есть"): раньше подсветка красилась ОТДЕЛЬНО
           на каждую <td> (11 отдельных операций перекраски на строку).
           Даже когда сам CSS-код был правильным (проверено рендером),
           это оставляло теоретическую возможность, что браузер не
           перекрасит одну конкретную ячейку синхронно с остальными
           (известный класс багов перерисовки в Chromium при сочетании
           sticky-шапки/blur на странице). Теперь красится сам <tr> —
           ОДНА операция на всю строку. Ячейки без своего цвета
           (обычный текст, "Расхождение"/"Составная"/"Проверь" - у них
           background: transparent по умолчанию) просто показывают
           цвет tr сквозь себя, а закрашенные статусы (Совпало и т.п.)
           остаются как обычно - td красится поверх tr. */
        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        th {
            background: #fff;
            color: #1a2634;
            padding: 8px 6px;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 10;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            border-bottom: 2px solid #e6ecf3;
        }
        /* Раскрытый график платежей лизинга - вложенная таблица со
           своей прокруткой ВНУТРИ строки таблицы договоров. У той
           тоже "прилипающая" шапка - если оба заголовка совпадают по
           высоте при прокрутке, они спорят за место и обрезают друг
           друга. Поднимаем шапку графика платежей повыше (z-index),
           чтобы она всегда была видна целиком поверх шапки договоров. */
        .leasing-schedule-table th {
            z-index: 20;
        }
        th .filter-input {
            display: block;
            width: 100%;
            padding: 4px 6px;
            margin-top: 4px;
            border: 1px solid #dce2ec;
            border-radius: 14px;
            background: #fafbfc;
            color: #1a2634;
            font-size: 14px;
            transition: 0.2s;
        }
        th .filter-input::placeholder {
            color: #7c8a99;
        }
        th .filter-input:focus {
            background: #fff;
            outline: none;
            border-color: var(--accent);
        }
        th .filter-select {
            display: block;
            width: 100%;
            padding: 4px 6px;
            margin-top: 4px;
            border: 1px solid #dce2ec;
            border-radius: 14px;
            background: #fafbfc;
            color: #1a2634;
            font-size: 14px;
            transition: 0.2s;
        }
        th .filter-select option {
            color: #2c3e50;
            background: white;
        }
        th .filter-select:focus {
            background: #fff;
            outline: none;
            border-color: var(--accent);
        }
        /* Скоуп на #results, чтобы фильтры остальных таблиц не менялись. */
        #results th .filter-input,
        #results th .filter-select {
            border-radius: 2px;
            border: 1px solid rgba(30,41,59,0.15);
            background: #fff;
            color: var(--wc-text-main);
        }
        #results th .filter-input:focus,
        #results th .filter-select:focus {
            background: #fff;
            border-color: var(--wc-blue);
        }
        /* Фильтр «Статус» (правка 276, её «странный выпадающий список»).
           В ячейке статуса теперь только значок, поэтому колонка узкая -
           и поле фильтра сжималось до одной буквы («В» вместо «Все»), а
           раскрывался из него список во всю ширину экрана. Ширину списка
           укоротили сами названия (см. RECON_STATUS_SHORT), а полю нужен
           минимум, чтобы в нём читалось выбранное. */
        #results th .status-filter-select {
            min-width: 96px;
        }
        td {
            padding: 6px 6px;
            border-bottom: 1px solid #ecf0f1;
            vertical-align: middle;
            font-size: 14px;
        }
        /* Чередование строк убрано (правка 361, её правка 23.09.2026: «убери чередующийся цвет строк») - во всех таблицах. */
        tr {
            background: #ffffff;
        }
        tr.hidden-row {
            display: none;
        }
        tr.approved-row {
            background: #eafaf1 !important;
        }
        tr.archived-row {
            display: none;
        }
        /* ИСПРАВЛЕНО (по правке - "Совпало" не должно быть пустым при
           клике; такие строки уходят в архив, но их можно продублировать
           именно на кнопке "Совпало"): #resultsBody получает класс
           show-matched-archive, когда выбран фильтр "Совпало" (см.
           applyTableFilters в reconciliation.js) - тогда для строк с
           .matched-archive-row общее правило archived-row{display:none}
           выше перебивается (совпадение классов + !important). */
        #resultsBody.show-matched-archive tr.archived-row.matched-archive-row {
            display: table-row !important;
        }
        #resultsBody.show-matched-archive tr.archived-row.matched-archive-row.hidden-row {
            display: none !important;
        }
        tr.leasing-paid-row {
            background: #a9e8c1 !important;
        }
        tr.leasing-overdue-row {
            background: #f5b7b1 !important;
        }
        tr.calendar-paid-row {
            background: #a9e8c1 !important;
        }
        /* Ячейки таблицы штрафов (и подобных) переносят длинный текст
           по словам, вместо того чтобы обрезаться в одну строку -
           так весь текст назначения платежа / комментария виден целиком. */
        #autoFinesTableWrap td, #autoFinesTableWrap th {
            white-space: normal;
            word-break: break-word;
        }
        /* ИСПРАВЛЕНО ЕЩЁ РАЗ (по скриншоту - "статусы по-прежнему
           сливаются в одно розовое поле"): reconciliation.js в
           нескольких местах делает statusCell.className = 'status-red'
           (ПОЛНОСТЬЮ заменяя список классов при интерактивных
           действиях - согласовать составную сумму, отменить решение
           и т.п.) - из-за этого отдельный класс .status-cell слетал,
           и стиль "таблетки" пропадал после первого же клика. Теперь
           скругление/отступ - прямо в САМИХ цветовых классах
           (.status-green и т.д.), они переживают такую замену.
           Дополнительно - плотная БЕЛАЯ рамка снизу у каждой цветной
           ячейки статуса, чтобы соседние строки с одинаковым цветом
           НИКОГДА не сливались в одно пятно, даже вплотную друг к
           другу. */
        .status-cell {
            border-radius: 14px;
            font-size: 14px;
            font-weight: 500;
        }
        /* Колонка "Статус" в таблице сверки - ТОЛЬКО значок, без текста
           (по правке - "в строке будет только значок, например кружок
           красный без текста"). Расшифровка статуса - в подсказке при
           наведении и в выпадающем фильтре над колонкой.
           Заливка тут принудительно снята: цветная "таблетка" имела
           смысл вокруг слова, а вокруг одного значка выглядит просто
           цветным квадратом. Цвет статуса продолжает жить в самом
           значке (🔴/🟡/✅), поэтому информация не теряется. */
        .status-icon-cell {
            text-align: center;
            background: transparent !important;
            border-bottom: none !important;
            padding: 4px 2px !important;
            white-space: nowrap;
        }
        .status-icon {
            font-size: 17px;
            line-height: 1;
            cursor: default;
        }
        /* Второй значок - свой статус контрагента (метка из вкладки
           "🏷️ Статусы"). Он стоит РЯДОМ с результатом сверки, а не
           вместо него, поэтому чуть меньше и приглушён. */
        .status-icon-tag {
            font-size: 14px;
            margin-left: 3px;
            opacity: 0.85;
        }
        .status-green, .status-yellow, .status-red, .status-gray, .status-warning, .status-archived {
            border-radius: 2px !important;
            font-size: 14px;
            font-weight: 700;
            padding: 4px 9px;
        }
        .status-green, .status-gray, .status-archived {
            border-bottom: 2px solid #fff !important;
        }
        /* Совпало - оставлена сплошная заливка (не упоминалось в правке) */
        .status-green {
            background: var(--wc-green-status);
            color: #fff;
        }
        /* Составная - без заливки, всегда оранжевый текст. */
        .status-yellow {
            background: transparent !important;
            color: var(--wc-orange);
            border-bottom: none !important;
        }
        /* Расхождение - без заливки, всегда красный текст. РАНЬШЕ
           заливка возвращалась при наведении на строку - убрано по
           правке ("красный снова появился" - не нужно, статус должен
           быть текстом всегда, и при наведении тоже, наравне со всеми
           остальными ячейками строки). */
        .status-red {
            background: transparent !important;
            color: var(--wc-red);
            border-bottom: none !important;
        }
        /* Чек/Акт/Аванс/Подотчёт - нейтральный, вне палитры статусов */
        .status-gray {
            background: rgba(91, 149, 207, 0.18);
            color: var(--wc-text-main);
        }
        /* Орг не совп / Проверь - без заливки (по правке - раньше была
           сплошная жёлтая заливка), только тёмно-жёлтый текст, как и
           у остальных статусов теперь. */
        .status-warning {
            background: transparent !important;
            color: #8a6d00;
            border-bottom: none !important;
        }
        .status-archived {
            background: rgba(30, 41, 59, 0.08);
            color: var(--wc-text-sub);
            font-style: italic;
        }
        /* Пилюли статуса в Чек/Акт/Аванс/Архив-листах (см.
           renderListModal в listmodal.js, класс status-label-<filterType>) -
           та же логика, что и у главной таблицы: цвет прямо на
           классе, а не на отдельной обёртке, чтобы не слетал. */
        .status-label {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 14px;
        }
        .status-label-green { background: #e1f5e8; color: #1d7240; }
        .status-label-yellow { background: #fef4d9; color: #a67a1a; }
        .status-label-red { background: #fce4e4; color: #b13e3e; }
        .status-label-check { background: #ede4fb; color: #6a3fa0; }
        .status-label-act { background: #e4e9fb; color: #3f4fa0; }
        .status-label-advance { background: #d8f0f5; color: #1a7a8a; }
        .status-label-podotchet { background: #fde8d8; color: #b3691e; }
        .status-label-archived { background: #f0f2f5; color: #1a2634; }
        .status-label-manual_review { background: #fdecd8; color: #b3691e; }
        .status-label-pending { background: #f0f2f5; color: #1a2634; }
        .status-label-gray { background: #f0f2f5; color: #1a2634; }
        /* Акт сверки: тонкая цветная полоска слева у строки вместо
           перекраски всего текста (см. renderActsTable в acts.js) -
           так дата и описание остаются чёрными и легко читаются. */
        .acts-compare-table tr.acts-row-green td:first-child { border-left: 4px solid #27ae60; }
        .acts-compare-table tr.acts-row-yellow td:first-child { border-left: 4px solid #f39c12; }
        .acts-compare-table tr.acts-row-composite td:first-child { border-left: 4px solid #f39c12; }
        .acts-compare-table tr.acts-row-red td:first-child { border-left: 4px solid #e74c3c; }
        .acts-compare-table tr.acts-row-gray td:first-child { border-left: 4px solid #bdc3c7; }

        /* ПЕРЕДЕЛАНА РАСКРАСКА (по правке - "убери зелёную заливку
           кусками, пусть выделяется вся строка, но только красная и
           жёлтая - те, которые нужно смотреть; заливка как цвет
           кнопки").

           Было: зелёным заливались ОТДЕЛЬНЫЕ ячейки (дебет, кредит,
           статус), из-за чего строка выглядела разорванной на куски, а
           закрытые строки - которые как раз смотреть НЕ нужно -
           кричали громче всех.

           Стало: у закрытых строк заливки нет вовсе, остаётся только
           полоска слева. Заливается ЦЕЛИКОМ строка, требующая
           внимания, - красная и жёлтая, ровно теми же цветами, что у
           карточек-счётчиков сверху (.card-red / .card-yellow), чтобы
           нажатая карточка и отобранные ею строки были одного цвета. */
        .acts-compare-table tr.acts-row-red td { background: #fce4e4; }
        .acts-compare-table tr.acts-row-yellow td,
        .acts-compare-table tr.acts-row-composite td { background: #fdf6d8; }
        /* Зелёная заливка ячеек внутри акта сверки снята: цвет остаётся
           только в тексте статуса и в полоске слева. */
        .acts-compare-table .status-green {
            background: transparent !important;
            color: #1f7b4a;
            border-bottom: none !important;
        }
        /* Пустая строка-заглушка для выравнивания дат между "Наш акт"
           и "Акт контрагента" - занимает место, но ничего не показывает. */
        .acts-compare-table tr.acts-empty-row td {
            border: none;
            background: transparent;
            height: 1.8em;
        }
        /* Описание обрезается многоточием, чтобы строки не разъезжались
           по высоте. Правило было привязано к НОМЕРУ колонки (4) - в
           парной таблице описаний два (4-я и 9-я), поэтому теперь у
           ячейки свой класс. */
        .acts-compare-table td.acts-label,
        .acts-compare-table:not(.acts-paired) td:nth-child(4) {
            max-width: 220px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ПАРНАЯ ТАБЛИЦА: наш акт слева, контрагента справа, в ОДНОЙ
           строке (см. renderActsPairedTable в acts.js). Так строки
           физически не могут разъехаться по высоте - а именно это и
           ломало выравнивание по датам, когда таблиц было две. */
        .acts-compare-table.acts-paired {
            table-layout: fixed;
            min-width: 1400px;
        }
        /* Вертикальная черта между двумя актами - чтобы было видно, где
           кончается наш и начинается их. */
        .acts-compare-table.acts-paired th.acts-side-split,
        .acts-compare-table.acts-paired td.acts-side-split {
            border-left: 2px solid #c9d4e0;
        }
        /* Полоска статуса слева у первой ячейки КАЖДОЙ стороны -
           вместо прежней полоски у всей строки: статусы у сторон
           разные. */
        .acts-compare-table.acts-paired td.acts-side-start {
            border-left-width: 4px;
            border-left-style: solid;
        }
        .acts-compare-table td.acts-cell-green.acts-side-start { border-left-color: #27ae60; }
        .acts-compare-table td.acts-cell-yellow.acts-side-start,
        .acts-compare-table td.acts-cell-composite.acts-side-start { border-left-color: #f39c12; }
        .acts-compare-table td.acts-cell-red.acts-side-start { border-left-color: #e74c3c; }
        .acts-compare-table td.acts-cell-gray.acts-side-start { border-left-color: #bdc3c7; }
        /* Заливка - только у того, что нужно смотреть; закрытые строки
           не заливаются (см. пояснение к acts-row-* выше). */
        .acts-compare-table td.acts-cell-red { background: #fce4e4; }
        .acts-compare-table td.acts-cell-yellow,
        .acts-compare-table td.acts-cell-composite,
        .acts-compare-table td.acts-cell-near { background: #fdf6d8; }
        /* «📂 Другой договор» (правка 359): сине-серая, не тревожная -
           это не расхождение, а строки не из этого акта. */
        .acts-compare-table td.acts-cell-other { background: #eef3f8; }
        .acts-compare-table td.acts-cell-other.acts-side-start,
        .acts-compare-table td.acts-cell-near.acts-side-start { border-left-color: #7f9bb5; }
        .acts-compare-table tr.acts-row-other td { background: #eef3f8; }
        .acts-compare-table tr.acts-row-other td:first-child { border-left: 4px solid #7f9bb5; }
        .acts-compare-table tr.acts-row-near td { background: #fdf6d8; }
        .acts-compare-table tr.acts-row-near td:first-child { border-left: 4px solid #f39c12; }
        .acts-compare-table .status-other { color: #3f6d99; }
        .card-other { background: #f3f7fb; color: #3f6d99; border-color: #b9cfe2; }
        .card-other.active { background: #dbe7f3; color: #2c5578; border-color: #7f9bb5; }
        /* Пусто с одной стороны - значит, на эту дату у неё записи нет. */
        .acts-compare-table td.acts-side-empty {
            background: transparent;
        }
        /* ИСПРАВЛЕНО (жалоба «голубой прямоугольник», три захода):
           обрезка текста стояла на САМОЙ ЯЧЕЙКЕ. display:-webkit-box
           превращает <td> в блок - ячейка перестаёт растягиваться на
           высоту строки, и её фон (в том числе подсветка при
           наведении) виден отдельным прямоугольником посреди строки.
           Мы трижды искали «голубой цвет», а дело было не в цвете, а в
           том, что ячейка перестала быть ячейкой.
           Теперь обрезка - на внутреннем блоке, а ячейка остаётся
           ячейкой. */
        .pair-info {
            font-size: 14px;
            color: #1a2634;
            vertical-align: middle;
            /* ИЗМЕНЕНО (по просьбе - "убавь колонку связанные, обрежь
               текст в колонке связанные"): состав составной суммы -
               длинный текст, и в узкой колонке он растягивал строку на
               5-6 строк по высоте. Теперь показываем максимум три
               строки, дальше многоточие. Полный текст никуда не делся:
               он во всплывающей подсказке при наведении и в окне
               "Составные суммы". */
        }
        .pair-info-text {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
        }
        /* СТАРЫЙ отдельный вид .btn-approve (плотный зелёный, 12px,
           острые углы) убран: из-за него в ОДНОЙ и той же таблице
           сверки "Утвердить" выглядел иначе, чем "Принять/Отклонить"
           в соседней строке. Теперь .btn-approve оформляется общим
           правилом кнопок решения ниже (см. .btn-decision-yes). */
        .comment-input {
            border: 1px solid #bdc3c7;
            border-radius: 4px;
            padding: 3px 5px;
            font-size: 14px;
            width: 100%;
            min-width: 80px;
            background: transparent;
            transition: 0.3s;
        }
        .comment-input:focus {
            border-color: #3498db;
            outline: none;
            background: white;
        }
        .action-select {
            padding: 4px 10px;
            border: 1.5px solid var(--wc-blue);
            border-radius: 2px;
            font-size: 14px;
            background: #fff;
            color: var(--wc-text-main);
            cursor: pointer;
            width: 100%;
            min-width: 100px;
        }
        .action-select:focus {
            border-color: var(--wc-blue);
            outline: none;
        }
        .card {
            padding: 12px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 3px solid transparent;
            user-select: none;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        .card .card-number {
            font-size: 27px;
            display: block;
            font-weight: 800;
        }
        .card .card-label {
            font-size: 14px;
            opacity: 0.8;
            margin-top: 3px;
        }
        /* ИСПРАВЛЕНО (по замечаниям - "убери тёмную заливку у Всего
           списаний", "жёлтое выделение сливается в одно пятно"):
           раньше активная карточка заливалась ПОЛНОСТЬЮ тёмным/ярким
           цветом (например #2c3e50 - тёмно-синий текст на белом
           превращался в белый текст на тёмно-синем), а "Составные" и
           "Проверь вручную"/"Орг не совп" красились в ПОЧТИ ОДИНАКОВЫЙ
           жёлто-оранжевый (#fdebd0 у обеих) - визуально сливались.
           Теперь: только мягкая подсветка рамкой + чуть более
           насыщенный фон при выборе (никогда не тёмная заливка), и
           жёлтый/оранжевый разведены по разным оттенкам. */
        .card-total {
            background: #eef2f8;
            color: #2c3e50;
            border-color: #d5dde8;
        }
        .card-total.active {
            background: #e3f4f7;
            color: #1a2634;
            border-color: var(--accent);
        }
        .card-green {
            background: #eafaf1;
            color: #1f7b4a;
            border-color: #bfe8d3;
        }
        .card-green.active {
            background: #d5f5e3;
            color: #1a6b3f;
            border-color: #27ae60;
        }
        .card-yellow {
            background: #fdf6d8;
            color: #a67c1e;
            border-color: #f3e2a0;
        }
        .card-yellow.active {
            background: #fbeeb0;
            color: #8a641a;
            border-color: #e6c235;
        }
        .card-warning {
            background: #fde8d8;
            color: #b3691e;
            border-color: #f3c299;
        }
        .card-warning.active {
            background: #fbd9b8;
            color: #964f13;
            border-color: #e6923f;
        }
        .card-red {
            background: #fce4e4;
            color: #b13e3e;
            border-color: #f2b3b3;
        }
        .card-red.active {
            background: #f8cccc;
            color: #942e2e;
            border-color: #e05c5c;
        }
        .card-gray {
            background: #ecf0f1;
            color: #1a2634;
            border-color: #bdc3c7;
        }
        .card-gray.active {
            background: #5a6472;
            color: white;
            border-color: #5d6d7e;
        }
        .filter-info {
            background: #ecf0f1;
            padding: 8px 15px;
            border-radius: 6px;
            margin: 10px 0;
            font-size: 15px;
            color: #2c3e50;
            display: none;
        }
        .filter-info .clear-filter {
            color: #e74c3c;
            cursor: pointer;
            font-weight: bold;
            margin-left: 10px;
        }
        .filter-info .clear-filter:hover {
            text-decoration: underline;
        }
        .stats {
            background: #ecf0f1;
            padding: 10px 15px;
            border-radius: 6px;
            margin: 10px 0;
            font-weight: bold;
            font-size: 14px;
        }
        .row-counter {
            text-align: center;
            padding: 10px;
            color: var(--wc-text-sub);
            font-size: 14px;
            font-weight: 600;
        }
        /* ИЗМЕНЕНИЕ: раньше было flex + flex-wrap - на разных строках столбцы
           "плавали" в зависимости от длины текста (архив выглядел как
           свалка). Теперь grid с фиксированными колонками - Дата/
           Контрагент/Сумма/Организация/Статус/Связанные/Комментарий/
           Действие всегда стоят строго друг под другом, как в таблице.
           Колонки соответствуют порядку span'ов в renderListModal()
           (listmodal.js) и .list-header-row (тот же порядок).
           НОВОЕ: ширины через CSS-переменные (--list-col-N) вместо
           фиксированных px/fr - так можно менять их из JS перетаскиванием
           за ползунок в шапке (см. startListColResize в listmodal.js),
           и они применяются сразу и к шапке, и ко всем строкам (переменные
           наследуются от #listBody вниз по дереву). */
        .list-item, .list-header-row {
            display: grid;
            grid-template-columns:
                var(--list-col-1, 85px) var(--list-col-2, 190px) var(--list-col-3, 130px)
                var(--list-col-4, 150px) var(--list-col-5, 140px) var(--list-col-6, 190px)
                var(--list-col-7, 160px) var(--list-col-8, 120px)
                var(--list-col-9, 110px);   /* Подписано - ставится рукой */
            align-items: center;
            column-gap: 10px;
            padding: 8px 12px;
            border-bottom: 1px solid #ecf0f1;
            transition: background 0.3s;
            width: max-content;
            min-width: 100%;
        }
        /* Без столбца «Подписано» - чек, аванс, подотчёт, архив (правка
           356): подпись есть только у акта. */
        .list-no-signed .list-item, .list-no-signed .list-header-row {
            grid-template-columns:
                var(--list-col-1, 85px) var(--list-col-2, 190px) var(--list-col-3, 130px)
                var(--list-col-4, 150px) var(--list-col-5, 140px) var(--list-col-6, 190px)
                var(--list-col-7, 160px) var(--list-col-8, 120px);
        }
        #listBody {
            overflow-x: auto;
        }
        .list-header-row {
            font-size: 14px;
            font-weight: bold;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
            color: #1a2634;
            position: sticky;
            top: 0;
            z-index: 5;
        }
        .list-header-row span {
            position: relative;
            padding-right: 8px;
        }
        /* Ползунок для изменения ширины столбца - тонкая полоска на
           правом краю каждого заголовка, тянешь мышкой вбок. */
        .col-resizer {
            position: absolute;
            right: -6px;
            top: -8px;
            bottom: -8px;
            width: 10px;
            cursor: col-resize;
            z-index: 6;
        }
        .col-resizer:hover, .col-resizer.resizing {
            background: rgba(52, 152, 219, 0.4);
        }
        /* ВИД «ДОКУМЕНТ» (её выбор «А», 27.09.2026): Дата, Контрагент,
           Сумма, Организация, Документ, Комментарий (+ Подписано у акта).
           Столбцов «Статус», «Связанные» и «Действие» в списках нет. */
        .list-doc-view .list-item, .list-doc-view .list-header-row {
            grid-template-columns:
                var(--list-col-1, 85px) var(--list-col-2, 190px) var(--list-col-3, 130px)
                var(--list-col-4, 150px) var(--list-col-10, 330px) var(--list-col-7, 200px)
                var(--list-col-9, 110px);
        }
        .list-doc-view.list-no-signed .list-item, .list-doc-view.list-no-signed .list-header-row {
            grid-template-columns:
                var(--list-col-1, 85px) var(--list-col-2, 190px) var(--list-col-3, 130px)
                var(--list-col-4, 150px) var(--list-col-10, 330px) var(--list-col-7, 200px);
        }
        .list-doc { font-size: 14px; white-space: nowrap; }
        .list-doc-wait { color: #7d879b; }
        .list-doc-have { color: #275e88; }
        .list-doc-arch { color: #55617a; }
        .list-doc-muted { color: #7d879b; font-size: 14px; }
        .list-doc-near { color: #a67a1a; font-size: 14px; white-space: normal; }
        .list-near-btn { padding: 2px 8px; font-size: 14px; margin-left: 4px; border-radius: 6px; }
        .list-item {
            background: #ffffff;
        }
        .list-item:hover {
            background: #c2f2e8 !important;
        }
        .list-item .date {
            font-size: 14px;
            color: #1a2634;
        }
        .list-item .amount {
            font-weight: bold;
            color: #1c2833;
        }
        .list-item .contractor {
            /* Без жирного (правка 174): «убери везде жирный шрифт с
               контрагентов - они есть в актах, чеках…». */
            font-weight: 400;
            color: #1c2833;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .list-item .org {
            font-size: 14px;
            color: #1a2634;
        }
        .list-item .status-label {
            font-size: 14px;
        }
        .list-item .received-check {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: #27ae60;
        }
        /* "Квадрат с галочкой" в столбце "Оплачено" (Авто штрафы) -
           крупный и явно заметный, вместо мелкого системного чекбокса. */
        .autofine-paid-check {
            width: 22px;
            height: 22px;
            accent-color: #27ae60;
            cursor: default;
        }
        .list-item .received-label {
            font-size: 14px;
            color: #1a2634;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .list-item .restore-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
        }
        .list-item .restore-btn:hover {
            background: #2980b9;
        }
        .list-item.archived-item {
            opacity: 0.75;
            background: #fcfcfc;
        }
        .list-item.archived-item:hover {
            background: #ffffff !important;
        }
        /* НОВОЕ (по правке - "квадратики зелёный/красный/синий вместо
           текстовых кнопок Принять/Отклонить/Отправить письмо" в
           главной таблице сверки, колонка "Действие"): три квадрата в
           один ряд, каждый - ровно треть ширины строки (flex:1 +
           aspect-ratio:1/1 держит квадратную форму независимо от
           реальной ширины колонки/после изменения размера читателем). */
        .row-action-icons {
            display: flex;
            gap: 4px;
            margin-bottom: 4px;
        }
        .row-icon-btn {
            flex: 0 0 calc((100% - 8px) / 3);
            aspect-ratio: 1 / 1;
            border: none;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            padding: 0;
            text-decoration: none;
        }
        .row-icon-accept { background: var(--wc-green-status); }
        .row-icon-reject { background: var(--wc-red); }
        .row-icon-email { background: var(--wc-blue); }
        /* ЕДИНЫЙ вид пары "принять / отклонить" - два одинаковых
           КВАДРАТА со значком (по правке - "сделай везде одинаково:
           квадратики принять-отклонить, красиво и ровно").

           Раньше на разных вкладках это выглядело по-разному: в
           "Проверь вручную" и в самой сверке - квадраты со значком, а
           в "Составных суммах" и "Организации не совпадают" - широкие
           кнопки с подписями. Из-за подписей они получались РАЗНОЙ
           ширины ("Принять" короче "Отклонить"), в узкой колонке
           вставали друг под друга и растягивали строку вдвое - ровного
           ряда не выходило никогда.

           Размер фиксированный, а не в долях колонки: только так
           квадраты остаются квадратами и совпадают между вкладками,
           где ширина колонки "Действие" разная. Подписи переехали в
           подсказку при наведении. */
        .decision-icons {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .decision-icons .row-icon-btn {
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            aspect-ratio: auto;
            font-size: 17px;
        }
        .decision-icons .row-icon-btn:hover {
            filter: brightness(1.08);
        }
        /* Старое имя оставлено: на него завязана разметка, которую
           переписывать разом рискованно. Ведёт себя так же. */
        .composite-actions {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        /* ИСПРАВЛЕНО (по замечанию - "измени цвета на более мягкие,
           шрифт крупнее, окно там где текст шире"): раньше кнопки
           были яркие/резкие (насыщенный зелёный/красный, острые
           углы), не в стиле остального сайта - теперь пилюли в той
           же мягкой палитре, что и статусы (см. .status-green и
           .status-red выше), крупнее шрифт. */
        /* ЕДИНЫЙ стиль кнопок решения "принять / отклонить" (по
           замечанию - "все кнопки во всех процессах принять-отклонить
           должны быть одного стиля, цвета, размера").

           Раньше в разных процессах эти кнопки рисовались тремя
           разными способами: в сверке "Утвердить" был маленькой
           плотно-зелёной кнопкой (.btn-approve, шрифт 12px), а
           "Принять/Отклонить" в соседней строке той же таблицы -
           крупной мягкой пилюлей (14px); в счетах и авансовых
           отчётах - .btn-success/.btn-delete-row да ещё с inline-
           размерами (13px), которые перебивали любой общий стиль.
           Теперь ВСЕ такие кнопки берут размер и палитру отсюда.

           .btn-decision-yes/.btn-decision-no - канонические имена.
           Старые имена оставлены псевдонимами, чтобы не переписывать
           разом все места вызова и не ловить регрессии там, где на
           класс завязан ещё и JS (например, поиск кнопки через
           querySelector('.btn-approve') в reconciliation.js). */
        .btn-decision-yes, .btn-decision-no,
        .btn-composite-approve, .btn-composite-reject,
        .btn-approve {
            border: 1.5px solid transparent;
            padding: 4px 10px;
            border-radius: 2px;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.2;
            cursor: pointer;
            transition: 0.2s;
            /* ИСПРАВЛЕНО (по просьбе - "убавь высоту этих кнопок, пусть
               галочка принять и крестик отклонить идут в одной строке с
               надписью"): в узкой колонке "Действие" браузер переносил
               подпись под значок, и кнопка становилась в два раза выше
               (галочка сверху, "Принять" снизу). nowrap запрещает этот
               перенос, поэтому значок и слово всегда в одну строку. */
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            /* ИСПРАВЛЕНО («посмотри, как вылезла красная Отклонить»).
               На карточке канбана две кнопки стоят рядом с flex:1, а
               nowrap выше запрещает переносить подпись. Элемент внутри
               flex по умолчанию не сжимается уже своего содержимого
               (min-width: auto) - и в узкой колонке правая кнопка
               вылезала за край карточки.
               min-width: 0 разрешает сжатие, ellipsis обрезает подпись
               многоточием вместо того, чтобы ломать карточку. */
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .btn-decision-yes, .btn-composite-approve, .btn-approve {
            background: var(--wc-green-status);
            color: #fff;
        }
        .btn-decision-yes:hover:not(:disabled),
        .btn-composite-approve:hover:not(:disabled),
        .btn-approve:hover:not(:disabled) {
            border-color: transparent;
        }
        .btn-decision-no, .btn-composite-reject {
            background: var(--wc-red);
            color: #fff;
        }
        .btn-decision-no:hover:not(:disabled),
        .btn-composite-reject:hover:not(:disabled) {
            border-color: transparent;
        }
        .btn-decision-yes:disabled, .btn-decision-no:disabled,
        .btn-composite-approve:disabled, .btn-composite-reject:disabled,
        .btn-approve:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        /* Составные записи - СВОЯ сетка колонок (не общий .list-item
           от Чек/Акт/Аванс-листов, у которого 8 фиксированных узких
           колонок под другой набор полей) - у составных записей
           реально 6 полей, и "Состав" (список слагаемых суммы) -
           самое длинное, ему нужно намного больше места, чем
           давал старый общий шаблон. */
        .composite-header-row, .composite-item {
            display: grid;
            grid-template-columns: 80px 160px 100px 130px minmax(340px, 2fr) 160px;
            align-items: center;
            column-gap: 14px;
            padding: 10px 12px;
            border-bottom: 1px solid #ecf0f1;
            font-size: 15px;
        }
        .composite-item { background: #ffffff; }
        .composite-item:hover { background: #e3f4f7 !important; }
        .composite-item .pair-info {
            font-size: 14px;
            color: #2c3e50;
            line-height: 1.5;
        }
        .contact-actions {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
        }
        .contact-actions a {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 14px;
            text-decoration: none;
            color: white;
            background: #3498db;
            transition: 0.3s;
        }
        .contact-actions a:hover {
            opacity: 0.8;
        }
        .contact-actions a.phone {
            background: #27ae60;
        }
        .contact-actions a.email {
            background: var(--wc-teal);
        }
        
        /* === НОВЫЕ СТИЛИ ДЛЯ МОДАЛКИ ДЕПОЗИТ (предотвращение смещения) === */
        .deposit-header-controls {
            display: flex;
            gap: 15px;
            align-items: center;
            background: #f8f9fa;
            padding: 10px 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .deposit-header-controls label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        .deposit-header-controls input {
            padding: 4px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .deposit-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        .deposit-table th {
            background: #34495e;
            color: white;
            padding: 8px 6px;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 10;
            font-size: 14px;
        }
        .deposit-table td {
            padding: 6px 6px;
            border-bottom: 1px solid #ecf0f1;
            vertical-align: middle;
        }
        
        /* Исправление смещения полей в депозите */
        .deposit-table td.ellipsis-col {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
        }
        .deposit-table td.ellipsis-col:hover {
            overflow: visible;
            white-space: normal;
            word-break: break-all;
            background: white;
            z-index: 10;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .deposit-table .amount-pos { color: #27ae60; font-weight: bold; }
        .deposit-table .amount-neg { color: #e74c3c; font-weight: bold; }
        .amount-pos { color: #27ae60; font-weight: bold; }
        .amount-neg { color: #e74c3c; font-weight: bold; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @media (max-width: 768px) {
            table { font-size: 14px; }
            td, th { padding: 3px 2px; }
            .contractor-item { grid-template-columns: 1fr; row-gap: 4px; }
            .modal-content { padding: 15px; }
            th .filter-input, th .filter-select { font-size: 14px; padding: 2px 3px; }
            .list-item, .list-header-row { grid-template-columns: 1fr; row-gap: 4px; }
            .filter-row { flex-direction: column; align-items: stretch; }
            .calendar-grid { font-size: 14px; }
            .calendar-cell { min-height: 70px; padding: 4px; }
            .calendar-controls { flex-direction: column; align-items: stretch; }
            .calendar-controls .month-title { font-size: 17px; min-width: auto; }
            .calendar-controls label { flex-wrap: wrap; }
            .payment-table { font-size: 14px; }
            .payment-table input, .payment-table select { font-size: 14px; }
            .tab-btn { font-size: 14px; padding: 6px 12px; }
            .org-table { font-size: 14px; }
            .org-table input, .org-table select { font-size: 14px; }
        }
        /* Строка результата глобального поиска (кнопка "🔍 Поиск" в шапке) */
        .search-result-row {
            padding: 8px 10px;
            border-bottom: 1px solid #ecf0f1;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.2s;
        }
        .search-result-row:hover {
            background: #eef6fb;
        }
        /* Здесь раньше жили правила кнопки "Отменить" (и история их
           переделок). Кнопка удалена совсем - по правке "убери кнопку
           отменить действие совсем везде". */
        /* Вкладка "По дням" в Анализе - таблица месяц×число (1-31).
           Раньше числа в узких ячейках переносились на несколько
           строк ("3\n688\n190" вместо "3 688 190") - нечитаемо.
           Теперь ячейки не переносятся - таблица становится шире
           экрана, но обёртка прокручивается вбок (см. #anDaymatrixBody
           в шаблоне: overflow-x:auto), а сами цифры всегда читаемы. */
        .an-daymatrix-table td,
        .an-daymatrix-table th {
            white-space: nowrap;
        }

/* ============================================================
   ПРОДОЛЖЕНИЕ визуального прохода (по присланному образцу) -
   начатый ранее проход дошёл только до кнопок/модалок в начале
   файла, дальше по файлу остались старые цвета/формы. Здесь
   ДОВОДИМ ту же палитру (--accent/--card-radius/--pill-radius из
   :root выше) до конца - снова только цвета/формы/тени, ни одного
   селектора/id/класса, на который опирается JS, не тронут.

   ГЛАВНАЯ НАХОДКА: класс "data-table" используется почти в 50
   местах по всему сайту (бюджет, ДДС, авансовый отчёт, KPI, лизинг,
   акты и т.д.), но нигде не был описан в CSS - эти таблицы
   рендерились вообще без стилей (голый браузерный вид). Ниже он
   наконец описан.
============================================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.data-table th {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 2px solid #e6ecf3;
    font-weight: 600;
    color: #1f2a3e;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}
.data-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #f0f2f6;
    color: #1a2538;
    vertical-align: middle;
}
/* ИСПРАВЛЕНО (по замечанию - "используй стиль 1 стр прогноз
   поступлений зелёный, списаний красный"): правило выше
   (".data-table td") специфичнее, чем просто ".amount-pos"/
   ".amount-neg" (класс + элемент против одного класса) - оно
   побеждало и перекрашивало суммы обратно в обычный тёмный цвет
   везде, где эти классы используются ВНУТРИ .data-table (например
   на вкладке "Анализ → Прогноз"). Добавляем более специфичную пару
   правил, которая гарантированно побеждает. */
.data-table td.amount-pos { color: #27ae60 !important; font-weight: bold; }
.data-table td.amount-neg { color: #e74c3c !important; font-weight: bold; }
.data-table input,
.data-table select,
.data-table textarea {
    border: 1px solid #dce2ec;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 14px;
    background: #fafbfc;
}
.data-table input:focus,
.data-table select:focus {
    border-color: var(--accent);
    outline: none;
    background: #fff;
}

/* ============================================================
   ВИДИМЫЕ ПОЛЗУНКИ ШИРИНЫ СТОЛБЦОВ (по правке - "добавь ползунки
   двигать столбики по ширине самостоятельно").

   Сама возможность тянуть край заголовка была и раньше (см.
   static/js/tableresize.js), но НИЧЕМ не обозначалась: надо было
   угадать, что у правого края заголовка есть невидимая полоска
   захвата шириной 8px. Про такую возможность невозможно догадаться -
   поэтому теперь у каждого заголовка виден разделитель, а при
   наведении он подсвечивается и курсор превращается в стрелку.
   Логика перетаскивания не менялась - только её видимость. */
/* ВНИМАНИЕ: здесь СПЕЦИАЛЬНО НЕТ "position: relative" для заголовка.
   У .data-table th выше стоит position: sticky (закреплённая шапка
   таблицы при прокрутке), и правило с relative перебило бы его -
   шапка перестала бы прилипать во ВСЕХ таблицах приложения. Это не
   нужно: sticky сам по себе делает элемент позиционированным, поэтому
   разделитель ниже и так отсчитывается от края заголовка. */
.data-table thead th:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22%;
    bottom: 22%;
    right: 0;
    width: 2px;
    border-radius: 2px;
    background: #d3dbe6;
    transition: background 0.15s;
    pointer-events: none;
}
.data-table thead th:not(:last-child):hover::after {
    background: var(--accent, #5B95CF);
    width: 3px;
}

/* ============================================================
   Таблица "📦 Запасы -> Остатки". Отступы между столбцами убавлены
   (по правке - "убавь отступы между столбиками"): 8px по бокам
   каждой ячейки давали 16px между соседними полями ввода, из-за чего
   длинное название не помещалось, а таблица не влезала по ширине.
   Стало 4px. Поля ввода растянуты на всю ширину своего столбца,
   поэтому все колонки выровнены по одной линии с заголовками, и
   столбец можно сузить ползунком - раньше его распирало изнутри
   поле с жёсткой шириной в пикселях. */
.inventory-table th,
.inventory-table td {
    padding: 6px 4px;
}
.inventory-table input,
.inventory-table select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Числа выровнены вправо - так их удобнее сравнивать между строками,
   и они читаются заодно со столбцом "Сумма", который тоже справа. */
.inventory-table input.inv-num {
    text-align: right;
}

/* Вкладки - активная подчёркивается акцентным цветом, а не старым синим */
.tab-btn.active {
    color: #1a2634;
    border-bottom-color: var(--accent);
}
.tab-btn:hover {
    color: #1a2634;
}

/* Карточки итогов/статистики (summary-cards/.card) - под тот же
   стиль, что metric-card в референсе: скруглённые, лёгкая тень,
   мягкая подсветка при наведении. */
.card {
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #e9eef4;
}
.card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Таблицы организаций/остатков - шапка теперь светлая, липкая,
   в стиле остальных таблиц (было: тёмно-синяя заливка). */
.org-table th {
    background: #fff;
    color: #1f2a3e;
    border-bottom: 2px solid #e6ecf3;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.3px;
}
.org-table input,
.org-table select {
    border-radius: 8px;
}
.org-table .btn-delete-row {
    border-radius: var(--pill-radius);
}

/* Пилюли-статусы (используются кое-где инлайновыми стилями через
   escAttr-шаблоны в JS под разными background - здесь только даём
   универсальный класс на будущее и подправляем поля ввода вне таблиц
   под общий скруглённый стиль). */
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="email"], input[type="password"],
select, textarea {
    border-radius: 8px;
}

/* ============================================================
   БОКОВАЯ ПАНЕЛЬ (по присланному образцу - структура и расположение
   кнопок, а не только цвета). ВАЖНО: это чисто вёрсточная перестройка
   поверх уже работающей разметки - каждая кнопка сохранила свой
   onclick/id 1-в-1, просто физически переехала сюда и получила новый
   класс-обёртку. Ни один обработчик не менялся.
============================================================ */
/* ИСПРАВЛЕНО (реальный баг: "когда мышка на строке, должна
   прокручиваться именно эта часть, а не левая панель"): раньше у
   body не было своей высоты - вся страница (панель + содержимое)
   прокручивались ВМЕСТЕ как один документ, поэтому колесо мыши над
   таблицей на самом деле листало всю страницу целиком, включая
   панель слева. Теперь body занимает ровно высоту экрана и сам не
   прокручивается - а панель и основное содержимое каждые получили
   СВОЙ независимый скролл: наведя мышь на таблицу, крутится именно
   она, панель остаётся на месте (и наоборот). */
body {
    display: flex;
    max-width: none;
    margin: 0;
    padding: 0;
    align-items: flex-start;
    height: 100vh;
    overflow: hidden;
    font-size: var(--base-font-size);
}
/* ИСПРАВЛЕННАЯ ОШИБКА ("в режиме администратора не прокрутить текст
   вниз"): правило выше писалось под ГЛАВНЫЙ экран - там body ровно в
   высоту окна и сам не прокручивается, а панель и таблица имеют свои
   отдельные полосы прокрутки. Но стиль общий на все страницы, и
   админ-панель, вход и приглашение получали то же самое: высота
   ровно экран, overflow:hidden - и всё, что ниже, просто нельзя было
   достать ни колесом, ни клавишами.
   Такие страницы помечают body классом page-scroll (см.
   {% block body_class %} в base.html) и прокручиваются как обычный
   документ. */
body.page-scroll {
    display: block;
    height: auto;
    min-height: 100vh;
    overflow: auto;
}
.sidebar {
    width: var(--sidebar-w, 272px);
    background: var(--wc-glass-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: none;
    padding: 24px 16px 16px 20px;
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.sidebar .logo {
    margin: 0 0 18px 0;
}
/* Заголовок раздела боковой панели. По просьбе ("сделай чтобы эти
   поля в разделе открывались плюсиком или сворачивались обратно")
   заголовок стал кликабельным: клик сворачивает/разворачивает список
   кнопок раздела, слева от названия - "+"/"−". */
.section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin: 18px 0 8px 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    padding: 6px 8px;
    transition: background 0.15s;
    /* ПРАВКА - "раздел темнее, кнопки внутри светлее": раньше было
       наоборот (заголовок раздела - просто текст без фона, кнопки -
       заливка). Теперь заголовок раздела - тёмно-голубой (var(--wc-c1)),
       а сами кнопки ниже (.btn-group .btn) - светлее (var(--wc-c3)). */
    background: var(--wc-c1);
}
.section-title:hover {
    background: var(--wc-blue);
}
.section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(255,255,255,0.25);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
/* Свёрнутый раздел: список кнопок скрыт.
   ВАЖНО: скрываем через отдельный класс на РАЗДЕЛЕ, а не inline-
   стилем на .btn-group - настройка расположения кнопок уже
   пользуется inline display у самих кнопок (скрытие галочками),
   и смешивать эти два механизма нельзя. */
.sidebar-group.collapsed .btn-group {
    display: none;
}
.btn-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.btn-group .btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.btn-group .btn .icon {
    font-size: 17px;
    width: 32px;
    height: 32px;
    text-align: center;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef2f8;
}
/* ИСПРАВЛЕНО (по замечанию - "сделай кнопки белые как на скрине,
   при наведении бирюзовая рамочка"): раньше каждая кнопка панели
   несла свой обычный цвет класса (btn-success/btn-orgs/btn-info и
   т.п.) - это те же классы, что используются ВНУТРИ модалок для
   действий (согласовать/отклонить и т.д.), и там цвет важен для
   смысла. А в самой боковой панели цвет только пестрит - здесь он
   перебивается на белый фон с бирюзовой рамкой при наведении,
   независимо от исходного класса кнопки. */
/* ОБНОВЛЕНО (по правке визуала): кнопки панели - сплошная голубая
   заливка, белый текст всегда (и в покое, и при наведении - меняется
   только оттенок фона), одинаковый размер независимо от длины
   названия, иконки перед названием убраны. */
.btn-group .btn {
    background: var(--wc-c3) !important;
    color: var(--wc-text-main) !important;
    border: none;
    border-radius: 2px;
    box-shadow: none;
    min-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btn-group .btn:hover:not(:disabled) {
    border-color: transparent;
    background: var(--wc-c2) !important;
    color: var(--wc-text-main) !important;
    transform: none;
    box-shadow: none;
}
/* Иконки перед названием кнопки скрыты по просьбе. */
.btn-group .btn .icon {
    display: none;
}
.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #d0e0e6;
    display: flex;
    justify-content: center;
}
.settings-gear {
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
    color: #6b8a9a;
    transition: 0.2s;
    padding: 8px 18px;
    border-radius: var(--pill-radius);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    width: 100%;
    justify-content: center;
}
.settings-gear:hover {
    background: #e1f0f5;
    color: #1a2634;
}

.main {
    flex: 1;
    padding: 14px 36px 40px 36px;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
}
.white-block {
    background: var(--wc-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 4px;
    padding: 13px 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 18px rgba(30,58,90,0.08);
    border: none;
}
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.top-bar h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--wc-text-main);
    border: none;
    padding: 0;
    margin: 0;
}
.top-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.btn-outline {
    background: var(--wc-glass-strong);
    border: none;
    color: var(--wc-text-main);
    padding: 9px 18px;
    border-radius: 2px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-outline:hover {
    background: var(--wc-glass-hover);
    color: var(--wc-text-main);
}
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 11px;
    margin-bottom: 16px;
}
/* ПРАВКА - "убавь высоту карточек в 2 раза, число в одну строку с
   названием, а не под ним": раньше .label и .value стояли друг под
   другом (два блока), высота карточки была ~16px+18px+14px паддинги +
   две строки текста. Теперь всё в один ряд flex: название, число,
   иконка - карточка стала примерно вдвое ниже. */
.metric-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wc-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 2px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: none;
    cursor: pointer;
    transition: 0.15s;
}
.metric-card:hover {
    border-color: #b8d7de;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.metric-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(85,181,190,0.25);
}
.metric-card .label {
    font-size: 14px;
    color: #425264;
    font-weight: 500;
    white-space: nowrap;
}
.metric-card .value {
    font-size: 18px;
    font-weight: 700;
    color: #1a2634;
}
.metric-card .metric-icon {
    margin-left: auto;
    font-size: 14px;
    opacity: 0.85;
    flex-shrink: 0;
}
.metric-card.green .value { color: #1f7b4a; }
.metric-card.yellow .value { color: #a67c1e; }
.metric-card.red .value { color: #b13e3e; }

@media (max-width: 1024px) {
    .sidebar { padding: 16px 12px; }
    .btn-group .btn { font-size: 14px; padding: 9px 10px; }
    .main { padding: 20px; }
}
@media (max-width: 768px) {
    body { flex-direction: column; height: auto; overflow: visible; }
    .sidebar {
        width: 100%;
        height: auto;
        max-height: 60vh;
        overflow-y: auto;
        padding: 16px;
        flex-direction: column;
    }
    .main { height: auto; overflow-y: visible; }
    .top-bar h1 { font-size: 21px; }
    /* На мобильном панель уже не фиксированной ширины слева - окно
       занимает весь экран, как и раньше на телефоне. */
    .modal { left: 0; width: 100%; }
}

/* ============================================================
   ИСПРАВЛЕНО (по замечанию - "кнопка всего списаний тоже должна
   быть белая и при наведении ободок, и ободок у всех кнопок рядом
   правее"): карточки итогов сверки (Всего/Совпало/Составные и т.д.)
   должны выглядеть так же, как кнопки панели слева - белые, с
   бирюзовой рамкой при наведении, БЕЗ цветной заливки (даже
   пастельной). Правило в конце файла - явно побеждает более ранние
   .card-total/.card-green/... (которые оставляем для мест, где эти
   классы используются без .metric-card, например где-то ещё в коде
   могут остаться старые карточки). */
.metric-card,
.metric-card.card-total, .metric-card.card-total.active,
.metric-card.card-green, .metric-card.card-green.active,
.metric-card.card-yellow, .metric-card.card-yellow.active,
.metric-card.card-warning, .metric-card.card-warning.active,
.metric-card.card-red, .metric-card.card-red.active,
.metric-card.card-gray, .metric-card.card-gray.active {
    background: var(--wc-glass) !important;
    border: none !important;
}
.metric-card:hover,
.metric-card.active {
    border-color: transparent !important;
    box-shadow: 0 2px 10px rgba(91,149,207,0.25) !important;
}
/* Цветная полоска слева - единственное, что теперь отличает
   Совпало/Составные/Расхождения друг от друга по цвету на стеклянном
   фоне (число внутри тоже цветное, см. .metric-card.green .value
   и т.п. выше). */
.metric-card.card-total { border-left: 4px solid var(--wc-blue) !important; }
.metric-card.card-green { border-left: 4px solid var(--wc-green-status) !important; }
.metric-card.card-yellow { border-left: 4px solid var(--wc-orange) !important; }
.metric-card.card-warning { border-left: 4px solid var(--wc-yellow) !important; }
.metric-card.card-red { border-left: 4px solid var(--wc-red) !important; }

/* ============================================================
   "⚙️ Настройка расположения" - визуальные подсказки, что элементы
   можно перетаскивать (по замечанию - "сделай, чтобы при
   перетаскивании было видно, что её можно тащить"): курсор меняется
   на "хватай" при наведении и на "тащу" во время самого перетаскивания,
   элемент подсвечивается при наведении, во время перетаскивания
   становится полупрозрачным, а место, куда его можно бросить -
   подсвечивается рамкой сверху.
============================================================ */
.sg-group-item {
    background: #eef2f8;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    cursor: grab;
    border: 2px solid transparent;
    transition: 0.15s;
}
.sg-group-item:hover {
    background: #e3ecf7;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.sg-group-item:active {
    cursor: grabbing;
}
.sg-drag-handle {
    font-weight: bold;
    font-size: 15px;
    color: #1f2a3e;
    user-select: none;
}
.sg-btn-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sg-btn-item {
    background: #fff;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 15px;
    cursor: grab;
    border: 1px solid #e0e6ea;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
}
.sg-btn-item:hover {
    border-color: var(--accent);
    background: #f7fcfe;
}
.sg-btn-item:active {
    cursor: grabbing;
}
.sg-drag-handle-small {
    color: #1a2634;
    font-size: 14px;
    user-select: none;
    flex-shrink: 0;
}
/* Элемент, который сейчас тащат - полупрозрачный и слегка
   уменьшенный, чтобы явно отличаться от остальных. */
.sg-dragging {
    opacity: 0.35;
    transform: scale(0.98);
}
/* Место, куда наведён перетаскиваемый элемент - подсвечивается
   бирюзовой рамкой сверху, чтобы было видно, куда он встанет. */
.sg-drag-over {
    border-top: 3px solid var(--accent) !important;
}

/* Счётчик на кнопке панели (Чек/Акт/Аванс/Подотчёт/Орг не совп/
   Проверь вручную) - маленький кружок с числом справа от текста
   кнопки, НЕ заменяющий содержимое кнопки (см. _setBtnCounter в
   reconciliation.js - раньше здесь стирался весь текст кнопки
   вместе с цветной иконкой). */
.btn-counter {
    margin-left: auto;
    background: #eef2f8;
    color: #4a5a72;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
/* Непрочитанные сообщения - красным. Форма та же, что у остальных
   счётчиков, чтобы кнопки выглядели одинаково, но цвет другой:
   "осталось разобрать 12 операций" может подождать, а "вам написали"
   означает, что человек ждёт ответа прямо сейчас. */
.btn-counter.is-unread {
    background: #e74c3c;
    color: #fff;
}

/* ============================================================
   ".search-box" - ЕДИНЫЙ стиль поиска везде на сайте (по замечанию -
   "кнопка поиск пусть везде будет одинаковая, белое поле со значком
   лупа, длиной как на вкладке организации не совпадают"). Раньше
   этого класса не было в CSS вообще - каждое поле выглядело
   по-своему (браузерный дефолт). Теперь - одна пилюля везде: белый
   фон, скруглённые углы, приятный отступ, во всю ширину контейнера
   (то же самое, что уже естественно получалось на "Организации не
   совпадают" из-за отсутствия ограничений ширины).
============================================================ */
.search-box {
    width: 100%;
    padding: 11px 18px;
    border-radius: 2px;
    border: 1.5px solid #e0e6ea;
    background: #fff;
    font-size: 15px;
    color: #1f2a3e;
}
.search-box:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(85,181,190,0.12);
}
.search-box::placeholder {
    color: #9aa7b6;
}

/* Подсветка активной кнопки панели (окно которой сейчас открыто). */
.btn-group .btn.sidebar-btn-active {
    background: var(--wc-c1) !important;
    border-color: transparent !important;
    color: var(--wc-text-main) !important;
}

/* ============================================================
   Верхний ряд кнопок в "Счета" (Новая заявка/Мои задачи/Архив/...) -
   белые, единой высоты, перетаскиваемые (по просьбе). Тот же
   принцип подсветки активной, что и в боковой панели
   (.sidebar-btn-active уже определён там).
============================================================ */
.toolbar-drag-item {
    display: flex;
    cursor: grab;
    /* Перенос считается мышью (см. _wireInvoicesToolbarDragReorder):
       выделение текста на кнопке при этом только мешает, а касание
       не должно прокручивать страницу вместо переноса. */
    user-select: none;
    touch-action: none;
}
.toolbar-drag-item:active {
    cursor: grabbing;
}
/* Кнопка, которую сейчас несут: приподнята и полупрозрачна - видно,
   что она "в руке", а не просто нажата. */
.toolbar-drag-item.toolbar-drag-active {
    opacity: 0.55;
    transform: scale(0.97);
    cursor: grabbing;
}
.toolbar-btn-white {
    background: #fff !important;
    color: #1f2a3e !important;
    border: 1.5px solid #e0e6ea;
    height: 40px;
    /* ИСПРАВЛЕНО (по правке - "кнопки сделай не столбиком, а строкой").
       Здесь стояло display: flex - а это БЛОЧНЫЙ элемент во всю ширину
       строки. Там, где такие кнопки лежат внутри flex-контейнера (шапка
       счетов, панели окон), это было незаметно: контейнер и так строит
       их в ряд. А там, где обёртка - обычный <div> (например ряд кнопок
       на вкладке "Сотрудники" в KPI), каждая кнопка занимала всю ширину
       и они вставали столбиком.
       inline-flex - то же выравнивание значка с подписью внутри кнопки,
       но сама кнопка занимает место по своему содержимому и встаёт в
       строку с соседними. Такой же display, как у общего класса .btn. */
    display: inline-flex;
    align-items: center;
    box-shadow: none;
    vertical-align: middle;
}
.toolbar-btn-white:hover:not(:disabled) {
    border-color: var(--accent);
    background: #f7fcfe !important;
    transform: none;
    box-shadow: 0 2px 8px rgba(85,181,190,0.14);
}

/* "Проверь вручную" - своя сетка колонок (та же причина, что и у
   .composite-item выше: общий .list-item от Чек/Акт/Аванс-листов
   зажимал "Найденный кандидат" в узкую фиксированную колонку). По
   просьбе - "пусть отображается полностью, как в составных". */
.manual-review-header-row, .manual-review-item {
    display: grid;
    grid-template-columns: 80px 220px 100px minmax(340px, 2fr) 160px;
    align-items: center;
    column-gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid #ecf0f1;
    font-size: 15px;
}
.manual-review-item { background: #ffffff; }
.manual-review-item:hover { background: #e3f4f7 !important; }
.manual-review-item .pair-info {
    font-size: 14px;
    color: #2c3e50;
    line-height: 1.5;
    white-space: normal;
}

/* Справка на первом экране (по просьбе - "пусть пока на 1 странице,
   пока не нажата кнопка, отображается справка"). Скрывается при
   первом нажатии кнопки в панели и при появлении результатов сверки. */
/* Справка «С чего начать» СКРЫТА, пока её не наполнил код.
   Раньше пустая белая карточка висела на экране сама по себе: если
   запуск обрывался ошибкой, человек видел заголовок без содержимого и
   решал, что справка пустая, - хотя на самом деле сломалась
   программа. */
.start-help {
    display: none;
    background: #fff;
    border-radius: 14px;
    padding: 18px 22px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.start-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Фон доски "Счета на согласование" (по просьбе - "помести всё на
   такой фон", приложен бирюзовый образец). Мягкий бирюзовый градиент
   вместо белого: колонки и карточки остаются белыми, поэтому текст
   читается так же, а доска визуально отделяется от остального сайта. */
/* Фон распространён на ВСЁ окно "Счета на согласование" - и на шапку
   с названием, и на ряд кнопок, и на доску (по просьбе - "добавь этот
   фон и под кнопки 'счета на согласование' и кнопки ниже"). */
/* УБРАНО (по правке - "сделай сюда основной фон с главного экрана"):
   раньше здесь был свой отдельный бирюзовый градиент. Теперь
   .modal-content (см. начало файла) уже даёт тот же акварельный фон,
   что и на главной странице, плюс подхватывает свою картинку из
   личного кабинета - отдельный градиент для этого окна не нужен. */
#invoicesToolbar {
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}
#invoicesBoard {
    background: transparent;
    padding: 0;
}

/* ============================================================
   Больше места под содержимое во ВСЕХ окнах (по просьбе - "нижнюю
   границу поля подвинь максимально низко, задача - чтобы в это окошко
   влезало побольше заявок... на всех вкладках отодвинь нижнюю границу
   максимально низко").

   Где терялось место: у .modal-content было 25px отступа сверху и
   снизу, а у подвала с кнопкой "Закрыть" - ещё 15px отступа сверху
   плюс 15px внешнего отступа и рамка. В сумме около 60px по высоте
   уходило впустую, из-за чего нижняя граница стояла заметно выше низа
   экрана. Уменьшаем - содержимое получает эту высоту.
   ============================================================ */
.modal-content {
    padding: 8px 20px 4px !important;
}
.modal-footer {
    padding-top: 6px;
    margin-top: 6px;
    border-top: 1px solid #ecf0f1;
}
.modal-header {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
}

/* Кнопки верхнего ряда - полностью квадратные (по повторной правке -
   "сделай более квадратными") - было 2px, теперь 0. */
.toolbar-btn-white,
#invoicesToolbar .btn {
    border-radius: 0 !important;
}
#invoicesToolbar {
    margin-bottom: 6px !important;
    /* ИСПРАВЛЕНО (по правке - "выровняй левый край, чтобы был на
       одном уровне"): у #invoicesToolbar был свой padding:10px (см.
       правило выше), а у #invoicesTotalBar (карточки стадий под ним)
       - нет, поэтому кнопки в шапке начинались на 10px правее карточек
       ниже. Убираем боковые отступы здесь - оба ряда теперь начинаются
       строго от одного и того же левого края .modal-content. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#invoicesTotalBar {
    margin-bottom: 0 !important;
}

/* Заголовки стадий закреплены: при прокрутке доски вниз названия
   стадий остаются на месте (по просьбе - "закрепи столбики с
   названием стадии, они не должны двигаться"). */
.kanban-stage-header {
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Заметный горизонтальный ползунок под доской канбана (по просьбе -
   "добавь на нижнюю линию ползунок для прокручивания вправо, т.к. все
   стадии не влезают в экран"). Обычный тонкий системный ползунок на
   бирюзовом фоне почти не виден, поэтому делаем его толще и темнее. */
.kanban-scroll {
    /* ПОЛЗУНКА У ДОСКИ НЕТ ВОВСЕ (по правке - "убери ползунок").
       Вбок доска ездит стрелками ‹ › по краям - как в Битрикс24, где
       полосы прокрутки у канбана тоже не видно. Сама прокрутка
       осталась (колесо с Shift, тачпад, стрелки), спрятана только
       полоса. Минимальная высота - чтобы доска занимала экран, а не
       липла к шапкам колонок на пустой доске. */
    min-height: min(58vh, 560px);
    align-items: flex-start;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* старый Edge */
}
.kanban-scroll::-webkit-scrollbar { width: 0; height: 0; }
/* Прежние правила, рисовавшие широкую полосу прокрутки у доски,
   удалены: ползунок убран (см. .kanban-scroll выше), доска ездит
   стрелками. */

/* Двухколоночная табличка полей в карточке заявки (по просьбе -
   "сделай для текста табличку: в 1 столбике номер счёта, во втором
   А-1881 от 18.08.2026 - чтобы легче информация была визуально"). */
.invoice-info-table {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 18px;
    align-items: baseline;
    font-size: 16px;
}

/* Карточка заявки в две колонки: слева сведения, справа обсуждение
   (по правке - "перемести комментарии на это поле, только справа").
   Раньше обсуждение было отдельным блоком ПОД карточкой, а справа от
   полей пустовала половина ширины окна - поля короткие ("Нет",
   "договорный"), места там девать некуда.

   --invoice-facts-w задаёт, где проходит граница между колонками.
   Значение подобрано так, чтобы она вставала примерно у начала даты в
   строке "Номер счёта" (ориентир из правки). Точно к самой дате
   привязаться нельзя: её координата уезжает вместе с длиной номера
   счёта - "27 от 26.05.2026" и "118 695 от 26.05.2026" начинаются в
   разных местах. Двигается одной цифрой здесь. */
.invoice-detail-split {
    /* Ширину задаёт теперь КОЛОНКА КОММЕНТАРИЕВ, а не колонка сведений
       (по правке - "убавь ширину поля комментарии" + "добавь ползунок,
       чтобы двигать ширину поля комментарии"). Так и правильнее по
       смыслу: человек тянет ползунок именно за комментарии, а сведения
       занимают всё, что осталось. 420px - заметно уже прежнего
       (раньше комментарии забирали всю ширину сверх 500px колонки
       сведений, а на широком мониторе это половина экрана).
       Значение переопределяется ползунком и хранится на сервере
       (ключ invoiceCommentsWidth). */
    --invoice-comments-w: 420px;
    display: flex;
    /* stretch, а не flex-start: колонка комментариев должна тянуться
       до низа светлой карточки (по правке - "пусть 'добавить
       комментарий' будет спускаться до конца этого светлого окна").
       При flex-start она обрывалась сразу под последним комментарием. */
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
}
.invoice-detail-facts {
    flex: 1 1 320px;
    min-width: 0;
}
.invoice-detail-comments {
    flex: 0 0 var(--invoice-comments-w);
    min-width: 240px;
    max-width: 100%;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
}

/* ПРОМЕЖУТОЧНАЯ ОБЁРТКА - и почему без неё поле ввода висело посередине.
   Внутри колонки лежит div#invoiceCommentsSection, а уже в нём - сам
   блок комментариев. Растягивание было прописано блоку, но не этой
   обёртке: она оставалась высотой по содержимому, растягиваться внутри
   неё было не во что, и поле ввода останавливалось сразу под списком -
   примерно посередине колонки, вместо низа карточки.
   Теперь обёртка тянется на всю высоту колонки, и поле ввода опускается
   вниз - на один уровень с блоком "Комментарий для бухгалтерии" слева. */
#invoiceCommentsSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* min-height:0 обязателен: без него список комментариев не даст
       колонке сжаться и появится лишняя прокрутка всей карточки. */
    min-height: 0;
}

/* Ползунок между колонками. Узкая полоска с широкой зоной захвата -
   попасть курсором в 1-2 пикселя невозможно, поэтому сама полоска
   тонкая, а кликабельная область вокруг неё шире. */
.invoice-detail-resizer {
    flex: 0 0 10px;
    align-self: stretch;
    cursor: col-resize;
    position: relative;
}
.invoice-detail-resizer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #dbe4ec;
    border-radius: 2px;
    transition: background 0.15s;
}
.invoice-detail-resizer:hover::before {
    background: var(--accent, #5B95CF);
    width: 3px;
}

/* Внутренность колонки комментариев: заголовок сверху, список
   растягивается на всё свободное место и прокручивается внутри себя,
   поле ввода прижато к самому низу. */
.invoice-comments-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 220px;
}
.invoice-comments-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 6px;
}
.invoice-comments-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 8px;
    min-height: 40px;
}
.invoice-comment-item {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
/* Перенос ПО СЛОВАМ (по правке). overflow-wrap: anywhere нужен
   отдельно от word-break: длинная ссылка или артикул без пробелов
   иначе распирали бы колонку по ширине, и ползунок не смог бы её
   сузить. */
.invoice-comment-text {
    font-size: 16px;
    color: #1c2833;
    margin-top: 2px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.invoice-comment-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    /* БОЛЬШЕ И РАСТЁТ ПОД ТЕКСТ (её правка 11.09.2026, правка 168):
       было два строки с прокруткой внутри - несколько строк не
       прочитать, при прокрутке строка теряется. Теперь сразу четыре
       строки, дальше поле вытягивается само (autoGrowInvoiceComment в
       invoices.js, до половины экрана). Шрифт - как у поля комментария
       в задачах (15px), чтобы набранное было читаемо. */
    min-height: 100px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    overflow-y: hidden;
    /* resize: none - убран угловой "ползунок" самого поля ввода (по
       правке - "не нужно ползунок"). Ширину колонки теперь двигают
       разделителем слева, а тянуть за угол ещё и само поле - только
       путаница: оно вылезало за край колонки. */
    resize: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* На узком экране (или в узком окне) колонки встают друг под друга -
   иначе обсуждение сплющивалось бы до нечитаемой полосы. Разделитель
   при этом переезжает сверху, чтобы блок не сливался с полями. */
/* На узком экране колонки встают друг под друга, ползунок прячется -
   двигать нечего, когда колонка и так во всю ширину. */
@media (max-width: 1100px) {
    .invoice-detail-comments {
        flex: 1 1 100%;
        border-top: 1px solid #dbe4ec;
        padding-left: 0;
        padding-top: 14px;
    }
    .invoice-detail-resizer {
        display: none;
    }
}
/* Поле "Комментарий для бухгалтерии" раньше имело жёсткий
   max-width:520px в разметке - в ставшей узкой левой колонке оно
   вылезало бы за её край. */
.invoice-detail-facts #invAccountantComment {
    max-width: 100%;
}
.invoice-info-table > .k {
    font-weight: bold;
    color: #1c2833;
    white-space: nowrap;
}
.invoice-info-table > .v {
    color: #1c2833;
}

/* Круглые стрелки для перехода между стадиями - ПЕРЕРИСОВАНЫ ПОД
   БИТРИКС24 (по правке - "сделай стрелки, перемещающие вбок, точно
   такими же, как на скрине 2"): крупный полупрозрачный светлый круг,
   наполовину срезанный краем доски, тонкий тёмный шеврон, по
   вертикали - посередине доски. Прежний вид - серые кружки 48px на
   высоте, заданной вручную; высоту по-прежнему МОЖНО перетащить
   мышью (--kanban-arrow-top), но по умолчанию она в центре. */
.kanban-arrow {
    position: absolute;
    top: var(--kanban-arrow-top, calc(50% - 36px));
    z-index: 6;
    /* Размер и цвета - общие для ВСЕХ стрелок программы (переменные
       --arrow-* объявлены рядом с .hscroll-arrow). Один вид на всю
       программу: править в одном месте. */
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    border: none;
    background: var(--arrow-bg);
    color: var(--arrow-ink);
    font-size: 40px;
    font-weight: normal;
    line-height: 1;
    cursor: grab;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kanban-arrow:hover {
    background: var(--arrow-bg-hover);
}
.kanban-arrow:active {
    cursor: grabbing;
}
/* Круг прижат к краю доски. За край, как в самом Битриксе, он НЕ
   выносится сознательно: вынос за границу окна дал бы модальному окну
   собственную горизонтальную прокрутку - ещё один ползунок, ровно то,
   от чего избавляемся. */
.kanban-arrow-left { left: 0; }
.kanban-arrow-right { right: 0; }

/* Кнопки внутри карточки заявки - ОДНОГО размера и вида (по просьбе -
   "сделай кнопки одного размера с выделением, чтобы было видно, что
   это кнопка, и одного белого цвета"). Раньше три кнопки под заявкой
   были разного цвета, ширины и высоты. */
#invoiceStageActions .btn,
#invoiceStageActions .btn-composite-approve,
#invoiceStageActions .btn-delete-row {
    background: #fff !important;
    color: #1c2833 !important;
    border: 1.5px solid #cfd8e3 !important;
    border-radius: 6px !important;
    min-width: 220px;
    height: 44px;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
#invoiceStageActions .btn:hover:not(:disabled),
#invoiceStageActions .btn-composite-approve:hover,
#invoiceStageActions .btn-delete-row:hover {
    border-color: var(--accent) !important;
    background: #f7fcfe !important;
}
/* НОВОЕ (по правке - "сделай эти кнопки побольше и все одного размера
   и квадратные с лёгкой округлостью на всех стадиях где они есть"):
   "Согласовать"/"Отклонить" и все похожие цветные кнопки решения
   (Есть/Нет в ЭДО, Услуга оказана, Подписано в ЭДО, Оригинал получен
   и т.д. - все они используют классы .btn-decision-yes/-no) раньше
   не входили в правило выше (у них остался бы свой белый фон) - здесь
   тот же размер и та же лёгкая округлость, но свой цвет (зелёный/
   красный) сохранён, чтобы решение оставалось наглядным. */
#invoiceStageActions .btn-decision-yes,
#invoiceStageActions .btn-decision-no,
#invoiceStageActions .btn-decision-inventory,
#invoiceStageActions .btn-decision-closing {
    min-width: 220px;
    height: 44px;
    font-size: 15px;
    border-radius: 6px !important;
    justify-content: center;
}

/* "📦 В запасы" (по правке - "сделай кнопку в запасы голубую и такого
   же размера как согласовать, но перемести её в самый край вправо").
   Раньше это была мелкая галочка с подписью, стоявшая ПЕРЕД
   "Согласовать" - её было легко случайно задеть, целясь в кнопку
   согласования, и она терялась рядом с двумя крупными цветными
   кнопками.
   margin-left:auto прижимает её к правому краю ряда - остальные
   элементы (Согласовать / Отклонить / кому:) остаются слева.
   Голубая заливка взята из общей палитры (--wc-blue), а не задана
   отдельным цветом, чтобы кнопка не выпадала из стиля приложения. */
.btn-decision-inventory {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1.5px solid transparent;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    background: var(--wc-blue);
    color: #fff;
    transition: 0.2s;
}
.btn-decision-inventory:hover {
    filter: brightness(1.07);
}
/* Снятая галочка = приглушённая кнопка: по одному взгляду на ряд
   видно, уйдёт этот счёт в запасы или нет. Раньше состояние читалось
   только по самому квадратику галочки. */
.btn-decision-inventory:not(.is-on) {
    background: var(--wc-c2);
    color: #1c2833;
}
.btn-decision-inventory input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

/* "📎 Загрузить закрывающие" в ряду решения - фиолетовая, того же
   размера, что и "В запасы" (по правке). margin-left:auto стоит
   ИМЕННО ЗДЕСЬ, а не на "В запасы": так вправо уезжает пара кнопок
   целиком, между ними остаётся обычный зазор ряда, и "В запасы"
   по-прежнему крайняя справа. Если повесить auto на обе, между ними
   разорвало бы всё свободное место. */
.btn-decision-closing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 4px 10px;
    border: 1.5px solid transparent;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: #8e44ad;
    color: #fff;
    transition: 0.2s;
}
.btn-decision-closing:hover {
    filter: brightness(1.1);
}

/* Левый край поиска выровнен с рядом кнопок (по просьбе - "выровняй
   левый край кнопок поиска и ремонта"). */
#invoicesModal .modal-header {
    align-items: center;
}

/* ============================================================
   Платёжный календарь: закреплённая шапка, больше места, единый вид
   кнопок (по просьбе - "расширь просматриваемое поле со строками,
   пусть верхняя строка таблицы будет закреплена, прокручивается
   только список"; "открывай платёжный календарь на весь экран").
   ============================================================ */
#paymentCalendarModal .modal-content {
    max-width: none;
    width: 100%;
}
#paymentCalendarModal .modal-header { margin-bottom: 4px !important; padding-bottom: 4px !important; }
#paymentCalendarModal .tabs { margin-bottom: 4px !important; }
#paymentCalendarModal .table-toolbar {
    /* Кнопки повыше - чтобы окно со строками было больше (по просьбе).
       ПЕРЕНОС ВМЕСТО ПРОКРУТКИ (правка 199, её случай 14.09.2026:
       «кнопка "Загрузить" - край скрыт другой кнопкой»): ряд в одну
       строку с прокруткой вбок прятал хвост кнопок за правым краем, а
       прокрутку никто не видел. Не влезает - переносится на вторую
       строку, всё видно. */
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    gap: 8px;
    padding-bottom: 4px;
    margin-bottom: 6px;
}
#paymentCalendarModal .table-toolbar .btn { flex-shrink: 0; }
/* ПОЛЯ ПЕРИОДА - В ОДНУ ЛИНИЮ С КНОПКАМИ (её правка 09.09.2026:
   «сделай кнопки в одной линии»).
   Было: подпись «С:» вставала НАД полем даты, ряд получался в две
   строки, и кнопки по краям оказывались на разной высоте. Причина -
   label вёл себя как обычный текст: подпись и поле переносились, когда
   не хватало ширины. Теперь каждый label - своя строчка из подписи и
   поля, которая не рвётся, а весь ряд выровнен по середине. */
#paymentCalendarModal .table-toolbar { align-items: center; }
#paymentCalendarModal .table-toolbar label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0;
}
#paymentCalendarModal .table-toolbar label input[type="date"] {
    /* Та же высота, что у кнопок ЭТОГО ряда: они здесь ниже обычных
       (padding: 7px 12px, см. ниже), и поле в 40px давало ступеньку. */
    height: 34px;
    padding: 2px 8px;
    box-sizing: border-box;
    font-size: 14px;
}
/* РЯД КНОПОК НЕ СЖИМАЕТСЯ ПО ВЫСОТЕ.
   #tableTab - колонка с фиксированной высотой, и когда шапке окна не
   хватало места (плашка «Остаток к оплате» занимает две строки),
   flex сжимал именно ряд кнопок: кнопки обрезались снизу, и шапка
   таблицы наезжала на них. Теперь место отбирается у таблицы - она
   прокручивается, - а кнопки видны целиком. */
#paymentCalendarModal .table-toolbar { flex-shrink: 0; min-height: 40px; }
#paymentCalendarModal #calRemainingBox { flex-shrink: 0; }
/* Высота подстраивается под реальную шапку, а не под жёсткие 140px:
   когда строк статистики две (несколько организаций), прежний расчёт
   уводил низ таблицы за край окна. */
#paymentCalendarModal #tableTab { height: auto; flex: 1; min-height: 0; }
/* ШАПКА ТАБЛИЦЫ НЕ УПЛЫВАЕТ ВВЕРХ.
   Её правка 08.09.2026: «в платёжном календаре вверх уплывает шапка».
   Закрепление работает, только если прокручивается ИМЕННО тот ящик, в
   котором лежит таблица (.calendar-table-scroll). Стоит содержимому
   вкладки перерасти окно - и прокручиваться начинает само окно
   (.modal-body у него overflow-y: auto), а вместе с ним уезжает наверх
   и закреплённая шапка: она приклеена к своему ящику, а не к экрану.
   Достаточно одного лишнего ряда кнопок или плашки над таблицей,
   чтобы это случилось.
   Поэтому окну календаря прокрутку запрещаем: высоту делят между
   собой ряд кнопок, плашки и таблица, а ездит только таблица. Вкладке
   «Календарь» своя прокрутка оставлена - там сетка месяца, и ей
   прокрутка нужна. */
#paymentCalendarModal .modal-body {
    overflow: hidden;
    min-height: 0;
}
#paymentCalendarModal #calendarTab {
    overflow: auto;
    min-height: 0;
}
#paymentCalendarModal #tableTab > #calPastDueBox { flex-shrink: 0; }
#calRemainingBox { padding: 6px 12px !important; margin-bottom: 6px !important; font-size: 16px !important; }

#tableTab {
    display: flex;
    flex-direction: column;
    /* Максимум высоты под строки: вычитаем только шапку окна, вкладки
       и ряд кнопок (по просьбе - "нижнюю линию, где идёт ползунок,
       смести максимально низко, а кнопки подними повыше"). */
    height: calc(100vh - 140px);
}
/* Прокручивается ТОЛЬКО этот контейнер - и вниз, и вбок. Шапка
   таблицы при этом стоит на месте (по просьбе - "поле с датой, суммой
   и т.д. не должно смещаться при прокручивании строк, закрепи его"). */
#tableTab .calendar-table-scroll {
    flex: 1;
    overflow: auto;
    min-height: 0;
}
/* Общее правило для ВСЕХ ячеек шапки заменено двумя раздельными выше
   (заголовки и строка поиска липнут на РАЗНОЙ высоте). Здесь остаётся
   только тень под всей шапкой. */
#tableTab .payment-table thead th {
    box-shadow: 0 2px 0 #cfd8e3;
}

/* ============================================================
   Кнопки в ячейке "Договор/Счёт" платёжного календаря: красный крестик
   (удалить файл) и голубая скрепка (прикрепить). ОДИН класс задаёт
   размер обоим - по правке "маленький квадрат размером с красный, но
   голубого цвета и со скрепочкой". Общий размер здесь принципиален:
   если задавать его каждой кнопке отдельно, они разъедутся при первой
   же правке одной из них.
============================================================ */
/* ЯЧЕЙКА "Договор/Счёт" - сетка из трёх колонок фиксированной ширины
   (по правке - "сделай все синие квадратики в один столбик").
   Раньше содержимое шло подряд в ряд, и положение скрепки зависело от
   длины имени файла и от того, приложен ли он вообще: в одной строке
   она стояла сразу за списком, в другой - далеко правее.
   Третья колонка отведена скрепке ВСЕГДА, даже когда её нет (у
   договора с уже приложенным файлом кнопки не бывает) - иначе в такой
   строке колонка схлопнулась бы, и соседние съехали. */
.calendar-doc-cell {
    display: grid;
    /* Правка 166: третья колонка - ОДНО место для красного ✕ (файл есть) или
       синей скрепки (файла нет), чтобы они стояли строго друг под другом;
       четвёртая - скрепка у счёта, к которому файл уже приложен. */
    grid-template-columns: 96px minmax(0, 1fr) 28px 28px;
    gap: 6px;
    align-items: center;
    white-space: nowrap;
}
.calendar-doc-cell > select {
    width: 100%;
}
/* Файл (галочка, имя, крестик) живёт во ВТОРОЙ колонке и не вылезает
   за её пределы: длинное имя обрезается многоточием. */
.calendar-doc-files {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
}
/* Имя файла занимает всё свободное место колонки и обрезается
   многоточием - тогда красный крестик за ним стоит на одном месте во
   всех строках, как и голубая скрепка. */
.calendar-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar-file-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}
.calendar-file-btn.is-delete {
    background: #e74c3c;
}
.calendar-file-btn.is-delete:hover {
    background: #c0392b;
}
.calendar-file-btn.is-attach {
    background: var(--wc-blue);
}
.calendar-file-btn.is-attach:hover {
    filter: brightness(1.1);
}

/* ============================================================
   ЗАКРЕПЛЁННАЯ ШАПКА платёжного календаря: и строка заголовков, и
   строка поиска под ней (по правке - "закрепи первую строку таблицы и
   поле поиска").

   ЧТО БЫЛО СЛОМАНО. Обе строки лежат в одном <thead>, и обеим было
   прописано position: sticky - но у строки фильтров стоял отступ
   top: 28px, а правило ниже по файлу (#tableTab .payment-table thead th)
   специфичнее и перебивало его нулём. В итоге обе строки прилипали к
   одному и тому же месту и наезжали друг на друга: поле поиска
   пряталось под заголовками.

   КАК ИСПРАВЛЕНО. Высота строки заголовков не постоянна (зависит от
   шрифта и от того, перенеслось ли длинное название столбца), поэтому
   жёсткое число тут не годится - именно на этом и погорел прежний
   top: 28px. Реальная высота измеряется в JS после отрисовки таблицы и
   кладётся в переменную --pay-head-h (см. syncCalendarStickyOffset в
   static/js/calendar.js).
============================================================ */
#tableTab .payment-table thead tr:first-child th {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #eef3f8;
}
#tableTab .payment-table thead tr#paymentFilterRow th {
    position: sticky;
    top: var(--pay-head-h, 36px);
    z-index: 11;
    /* Непрозрачный фон обязателен: сквозь прозрачную закреплённую
       строку просвечивали бы уезжающие под неё строки таблицы. */
    background: #f4f7fa;
    box-shadow: 0 2px 0 #cfd8e3;
}

/* Подсветка только что добавленной строки (по просьбе - "при добавлении
   новой строки не видно, какую именно я добавила"). Снимается после
   сохранения. */
/* Правка 385 (её правка 24.09.2026): бледно-жёлтая, как при живом
   обновлении (#fff4c2), а не коралловая #F5A8A8 - «не выделение красным». */
.calendar-row-new > td {
    background: #fff4c2 !important;
}

/* Клетка для подгрузки счёта подсвечивается тем же коралловым - чтобы
   было видно, куда прикреплять. */
/* "Нужен счёт за этот месяц" - подсвечивается ТОЛЬКО сам выпадающий
   список "Договор/Счёт", а не вся ячейка (по правке - "пусть заливка
   будет не на всё поле, а только на эту кнопку, и цвет понежнее").
   Прежний коралловый #F5A8A8 во всю ширину колонки перетягивал
   внимание со всей строки; мягкий розовый с рамкой того же семейства
   заметен, но не кричит. */
.calendar-doc-select.needs-file {
    background: #fbe6e6 !important;
    border: 1px solid #e8b4b4 !important;
    color: #8a4a4a;
    border-radius: 4px;
}
/* Класс остался ради старых сохранённых раскладок и на случай, если
   где-то ещё вешается на ячейку: заливка снята, чтобы вся клетка
   больше не краснела. */
.calendar-cell-needs-file {
    background: transparent !important;
}

/* Длинные таблицы прокручиваются вбок с заметным ползунком (по
   просьбе - "добавь прокрутку в сторону на все страницы, где длинные
   таблицы"). */
.modal .table-scroll,
#tableTab .calendar-table-scroll {
    overflow-x: auto;
}
.modal .table-scroll::-webkit-scrollbar,
#tableTab .calendar-table-scroll::-webkit-scrollbar {
    height: 14px;
}
.modal .table-scroll::-webkit-scrollbar-track,
#tableTab .calendar-table-scroll::-webkit-scrollbar-track {
    background: #d6eef0;
    border-radius: 7px;
}
.modal .table-scroll::-webkit-scrollbar-thumb,
#tableTab .calendar-table-scroll::-webkit-scrollbar-thumb {
    background: #4a6572;
    border-radius: 7px;
    border: 2px solid #d6eef0;
}

/* ЕДИНОЕ скругление кнопок по всему сайту (по просьбе - "кнопки убавь
   это сильное округление... найди и поправь все такие кнопки, чтобы
   они были в едином стиле"). Раньше .btn имел скругление-пилюлю
   (var(--pill-radius)), из-за чего кнопки в календаре и других окнах
   выглядели заметно круглее, чем в согласовании счетов, где я уже
   выставила 8px. Теперь 8px везде. */
.btn,
.tab-btn,
.table-toolbar .btn {
    border-radius: 8px !important;
}

/* Ряд вкладок календаря + остаток к оплате в одну линию. */
#paymentCalendarModal .tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Кнопки ряда УЖЕ (по просьбе - "убавь ширину кнопок 'добавить строку'
   и всех, которые находятся в этом ряду"). */
#paymentCalendarModal .table-toolbar .btn {
    padding: 7px 12px !important;
    font-size: 14px !important;
}
/* Маленькие галочки в таблице - без зелёной заливки (по просьбе). */
#paymentTable input[type="checkbox"] {
    accent-color: #7a8699;
}

/* Контейнер таблицы календаря - точка отсчёта для стрелок прокрутки. */
#tableTab { position: relative; }

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ - фото профиля, форма редактирования, галерея
   фонов приложения (см. templates/index.html #profileModal и
   static/js/profile.js).
============================================================ */
.profile-photo-wrap {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.profile-photo-wrap-sm {
    width: 90px;
    height: 90px;
}
.profile-photo-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.profile-photo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--wc-glass-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    color: var(--wc-text-sub);
}
.profile-photo-placeholder-sm {
    width: 90px;
    height: 90px;
    font-size: 32px;
}
/* СВЕДЕНИЯ В КАБИНЕТЕ.
   Таблица прижималась вплотную к краю белой подложки, и первые буквы
   подписей ("Телефон", "Внутренний", "Почта", "День рождения")
   выглядели срезанными (по правке - "сдвинь немного белое поле, чтобы
   буквы не обрезались"). Отступ задан внутри ячеек, а не подложке:
   подложка рисуется на строках таблицы, и сдвигать её саму значило бы
   оставить полосы разной ширины. */
.profile-view-table {
    width: 100%;
    font-size: 14px;
    color: #1a2634;
    border-collapse: collapse;
}
.profile-view-table td {
    padding: 6px 14px;
}


/* Кнопка настроек - в САМОМ низу окна, справа (по правке "спусти
   кнопку настройки в самый низ"). Раньше она стояла сразу под
   таблицей сведений, а окно занимает весь экран - под кнопкой
   оставалось полэкрана пустоты. Теперь раздел просмотра растянут на
   всю высоту, а кнопку прижимает вниз margin-top: auto. */
/* Тело окна профиля - колонка на всю высоту: без этого проценты у
   вложенного блока не от чего считать, и кнопка осталась бы висеть
   под таблицей. */
#profileModal .modal-body {
    display: flex;
    flex-direction: column;
}
#profileViewSection {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.profile-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--wc-text-sub);
    margin-bottom: 4px;
}
.profile-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(30,41,59,0.15);
    border-radius: 2px;
    font-size: 14px;
    background: #fff;
    color: var(--wc-text-main);
}
.profile-field input:focus {
    outline: none;
    border-color: var(--wc-blue);
}
@media (max-width: 600px) {
    .profile-form-grid { grid-template-columns: 1fr; }
}
/* Z-64. День рождения: день и месяц списками, год по желанию. */
.profile-bd { display: flex; gap: 8px; }
.profile-bd select, .profile-bd input {
    padding: 8px 10px;
    border: 1px solid rgba(30,41,59,0.15);
    border-radius: 2px;
    font-size: 14px;
    background: #fff;
    color: var(--wc-text-main);
}
.profile-bd select:first-child { width: 80px; }
.profile-bd select + select { flex: 1; min-width: 0; }
.profile-field .profile-bd input { width: 90px; }
.profile-bd-hint { font-size: 14px; color: var(--wc-text-sub); margin-top: 4px; }

.bg-gallery {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.bg-gallery-item {
    cursor: pointer;
    text-align: center;
    width: 110px;
}
.bg-gallery-thumb {
    width: 110px;
    height: 74px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    transition: 0.15s;
}
.bg-thumb-default {
    background: linear-gradient(140deg, var(--wc-c1) 0%, var(--wc-c2) 50%, var(--wc-c3) 100%);
}
.bg-gallery-item:hover .bg-gallery-thumb {
    border-color: var(--wc-blue);
}
.bg-gallery-item.active .bg-gallery-thumb {
    border-color: var(--wc-blue);
    box-shadow: 0 0 0 2px rgba(91,149,207,0.35);
}
.bg-gallery-label {
    font-size: 14px;
    color: var(--wc-text-sub);
    margin-top: 6px;
}

/* Стили кнопки "Отменить" (.btn-icon-square / .btn-icon-square-badge)
   удалены вместе с самой кнопкой - по правке "убери кнопку отменить
   действие совсем везде". Больше их никто не использует. */

/* ============================================================
   Изменение ширины столбцов в "Управление контрагентами" (по правке -
   "добавь чтобы была возможность двигать ширину столбиков кому как
   удобно") - см. static/js/contractors.js (initContractorColumnResize,
   applyContractorColumnWidths).
============================================================ */
.contractor-item-header span {
    position: relative;
}
.contractor-col-resizer {
    position: absolute;
    top: -10px;
    bottom: -10px;
    right: -5px;
    width: 9px;
    cursor: col-resize;
    z-index: 5;
}
.contractor-col-resizer:hover,
.contractor-col-resizer.resizing {
    background: rgba(52, 152, 219, 0.35);
}

/* ============================================================
   Своя вертикальная прокрутка у КАЖДОГО столбика канбана "Счета на
   согласование" (по образцу Bitrix24, см. скриншот) - раньше вся
   страница росла по высоте вместе с самой длинной колонкой, теперь
   каждая колонка прокручивается независимо в пределах своей высоты.
   См. static/js/invoices.js renderInvoicesBoard.
============================================================ */
.kanban-column-body {
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #4a6572 #d6eef0;
}
.kanban-column-body::-webkit-scrollbar {
    width: 8px;
}
.kanban-column-body::-webkit-scrollbar-track {
    background: #d6eef0;
    border-radius: 4px;
}
.kanban-column-body::-webkit-scrollbar-thumb {
    background: #4a6572;
    border-radius: 4px;
}
.kanban-column-body::-webkit-scrollbar-thumb:hover {
    background: #2f4550;
}

/* ДОСКА ЗАДАЧНИКА - ДО НИЗА ЭКРАНА (правка 283, её правка 18.09.2026:
   «поле для отображения задач и напоминалок не обрезай, пусть будет до
   самого низа экрана»). Общее правило .kanban-column-body обрезает
   колонку на 68vh - на длинном списке задач приходилось листать внутри
   короткой колонки, когда под ней ещё полэкрана пусто. Здесь колонка
   считает высоту от окна: минус шапка окна, панель кнопок и небольшой
   отступ снизу. Счета на согласование не трогаем - правило своё, только
   для задачника. Верх колонки всегда на 226px от верха экрана (окно
   раскрыто во весь экран, высота шапки и панели не плавает), плюс 24px
   снизу на полосу прокрутки доски - отсюда 250. */
#tasksModal .kanban-column-body {
    max-height: calc(100vh - 250px);
}

/* ============================================================
   Окно "🏦 Банк — остатки по счетам" - крупнее шрифт (по правке -
   "сделай шрифт больше, ничего не видно"). Таблица использует общий
   .data-table (14px/12px) - здесь он слишком мелкий для сумм по
   счетам, поэтому увеличиваем именно в рамках этого окна, не трогая
   .data-table в остальных модалках.
============================================================ */
/* Размер задаётся ТАБЛИЦЕ - значит, суммам: они здесь главное.
   Названия счетов и организаций мельче, см. .bank-name-cell ниже. */
#bankModal .data-table {
    font-size: 22px;
}
#bankModal .data-table th {
    font-size: 14px;
    padding: 12px 10px;
}
#bankModal .data-table td {
    padding: 14px 10px;
    line-height: 1.35;
}
/* Названия счетов и организаций (по правке - "уменьши названия счетов,
   увеличь цифры, и на кассе тоже"). Номер счёта - длинная строка,
   которая переносится на две; крупным он занимал пол-таблицы и
   перетягивал внимание с сумм, ради которых окно и открывают.
   Класс, а не :first-child: в "Итогах" текстовых колонок две (счёт и
   организация), в "Кассе" одна - по номеру колонки они бы разъехались. */
#bankModal .data-table td.bank-name-cell {
    font-size: 15px;
    line-height: 1.3;
    color: #35414f;
}

/* ПОДСВЕТКА СТРОКИ ПРИ НАВЕДЕНИИ - как на главном экране (по правке).
   В таблице сверки это #dde5ee; здесь было бледно-голубое #e3f4f7 из
   общего .data-table, и на зелёной клетке "Текущий остаток" подсветка
   вообще не срабатывала - клетка закрашена своим цветом
   (.balance-cell-green). !important красит и её, чтобы строка
   подсвечивалась ЦЕЛИКОМ, а не до последнего столбца. Правило
   действует на обе таблицы окна - "Итоги" и "Касса". */
#bankModal .deposit-header-controls span {
    font-size: 16px !important;
}
#bankModal .modal-footer span {
    font-size: 15px !important;
}
#bankModal .tab-btn {
    font-size: 16px;
}

/* ============================================================
   Окно "🧾 Акт сверки" - компактные 2 узкие строки кнопок/полей
   (по правке), белые кнопки (переиспользуем .toolbar-btn-white),
   карточки-счётчики вдвое ниже.
============================================================ */
.acts-compact-controls {
    padding: 6px 10px !important;
    gap: 6px 10px;
}
.acts-compact-controls label {
    font-size: 14px;
}
.acts-compact-controls input[type="file"] {
    font-size: 14px;
}
/* Карточки-счётчики ниже (по правке - "убавь высоту цветных кнопок"):
   они здесь только чтобы отобрать строки, а место отнимали у самой
   таблицы. Число и подпись встают в ОДНУ строку - так карточка
   занимает высоту строки текста, а не двух. */
#actsModal .card {
    /* display:flex обязателен: у общего .card его нет (там обычный
       блок с text-align:center), и одно flex-direction ничего бы не
       поменяло - число так и осталось бы над подписью. */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 12px;
    min-height: 0;
    border-radius: 8px;
    border-width: 2px;
}
#actsModal .card .card-number {
    font-size: 16px;
    line-height: 1.2;
}
#actsModal .card .card-label {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.2;
}

/* Нижняя панель у акта сверки убрана (см. index.html), поэтому нижний
   отступ окна тоже сокращаем - иначе под таблицей осталась бы полоса
   пустоты ровно там, где раньше стояла кнопка "Закрыть". */
#actsModal .modal-content {
    padding-bottom: 6px;
}
#actsModal .modal-body {
    padding-bottom: 0;
}

/* ============================================================
   Окно "📊 ОСВ по договорам" - крупнее шрифт ВСЕГО текста внутри
   (по правке - "сделай шрифт всего текста внутри крупнее").
============================================================ */
#osvModal {
    font-size: 17px;
}
#osvModal h2 {
    font-size: 20px;
}
#osvModal .tab-btn {
    font-size: 16px;
}
#osvModal .data-table {
    font-size: 16px;
}
#osvModal .data-table th {
    font-size: 14px;
}
#osvModal .btn,
#osvModal label,
#osvModal select,
#osvModal input {
    font-size: 16px !important;
}

/* ============================================================
   Окно "📊 KPI" - поля, которые заполняются вручную, выделены
   тёмно-серой рамкой (по правке - "выдели поля заполняемые тёмно
   серыми рамками"), чтобы сразу отличались от справочных/расчётных
   ячеек рядом.
============================================================ */
.kpi-editable {
    border: 1.5px solid #5a6472 !important;
}
.kpi-editable:focus {
    border-color: #2c3e50 !important;
    outline: none;
}

/* ============================================================
   Окно "🚔 Авто штрафы" - поля ввода на вкладках Все/Списать/ИП/
   Собственник выделены тёмно-серой рамкой (по правке - "контур еле
   видно, все строки сливаются"), и строки таблицы разделены заметнее,
   чем стандартная едва видная граница .data-table.
============================================================ */
.autofine-editable {
    border: 1.5px solid #5a6472 !important;
}
.autofine-editable:focus {
    border-color: #2c3e50 !important;
    outline: none;
}
#autoFinesModal .data-table td {
    border-bottom: 1.5px solid #c5ccd6;
}

/* ============================================================
   Сортируемые заголовки таблиц (окно "📈 Реализации" - по
   ответственным/по контрагентам) - курсор-указатель и лёгкая
   подсветка при наведении, чтобы было видно, что по заголовку
   можно кликнуть для сортировки.
============================================================ */
.sortable-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.sortable-th:hover {
    color: #2980b9 !important;
    background: #f0f6fa;
}


/* ============================================================
   ПОЛЯ ПАРОЛЕЙ, КОТОРЫЕ НЕ ДОЛЖНЫ ВЫЗЫВАТЬ МЕНЕДЖЕР ПАРОЛЕЙ.

   ЧТО БЫЛО. Пароль от резервной копии и пароль почтового ящика -
   обычные поля <input type="password">. Браузер видит на странице
   любое такое поле, считает страницу формой входа и после каждого
   действия предлагает "Сохранить пароль?", подставляя в качестве
   логина случайное число со страницы (например, сумму счёта). Окно
   выскакивало поверх карточки заявки и мешало работать.

   КАК СДЕЛАНО. Поле остаётся обычным текстовым (браузер его не
   опознаёт), а символы скрываются средствами оформления. Для браузеров,
   которые этого не умеют (Firefox), в ui.js есть запасной путь -
   там поле возвращается к типу "password": лучше лишнее окно, чем
   пароль открытым текстом.
============================================================ */
.masked-input {
    -webkit-text-security: disc;
    text-security: disc;
}


/* ============================================================
   КОЛОНКА "РЕШЕНИЕ" и поле комментария в таблице сверки.

   Квадратики принять/отклонить/отправить переехали из колонки
   "Действие" в свою, сразу за статусом (по правке): раньше они лежали
   над выпадающим списком, разъезжались по высоте и терялись.

   Комментарий стал текстовой областью и последним столбцом: длинный
   текст переносится по словам и виден целиком, а не уезжает за край
   строки.
============================================================ */
.decision-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}
.decision-cell .row-action-icons {
    display: flex;
    gap: 4px;
    justify-content: center;
}

/* (выравнивание этой ячейки задано ниже - по середине строки) */
textarea.comment-input {
    width: 100%;
    min-height: 30px;
    max-height: 120px;
    padding: 4px 6px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.35;
    border: 1px solid #dbe4ec;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    overflow-y: auto;
    /* Перенос ПО СЛОВАМ - и принудительный разрыв длинного слова:
       номер счёта без пробелов иначе распирал бы колонку. */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}


/* Заголовки таблицы сверки выравниваются по ВЕРХУ: у одних колонок под
   подписью стоит поле фильтра, у других - нет, и без этого правила
   подпись колонки без фильтра оказывалась посередине, а не в одном
   ряду с соседями (так было с колонкой "Решение"). */
#resultsBody, .table-wrapper table thead th {
    vertical-align: top;
}


/* ============================================================
   ЕДИНЫЙ ВИД ПОЛЕЙ ФИЛЬТРА В ШАПКЕ ТАБЛИЦЫ.

   Текстовые поля и выпадающие списки рисовались по-разному: у полей
   шрифт наследовался от страницы, а списки браузер оформляет своим
   системным шрифтом. Из-за этого "Фильтр..." и "Все действия" в одной
   строке выглядели набранными разными шрифтами и разной высоты.
   Здесь и то и другое приводится к одному виду.
============================================================ */
th .filter-input,
th .filter-select {
    font-family: inherit;
    /* Кегль 14px (мельче в программе нет - см. правку «шрифт 14 и 15,
       меньше не нужно»); высота поднята с 26px, иначе текст режется. */
    font-size: 14px;
    line-height: 1.2;
    height: 28px;
    box-sizing: border-box;
    /* Списку нужен собственный отступ справа под стрелку, иначе текст
       в нём поджимается сильнее, чем в текстовом поле. */
    padding: 3px 6px;
}
th .filter-select {
    padding-right: 18px;
}

/* ============================================================
   КОММЕНТАРИЙ В СТРОКЕ - НА ОДНОМ УРОВНЕ С ОСТАЛЬНЫМИ ЯЧЕЙКАМИ.

   Поле стало текстовой областью (чтобы длинный текст переносился), и
   по умолчанию такие поля выше однострочных: строка "разъезжалась",
   комментарий стоял выше соседних ячеек. Задаём ту же высоту, что у
   выпадающих списков рядом, и выравниваем по середине строки. Когда
   текст длиннее одной строки, поле растёт само (autoGrowComment).
============================================================ */
#resultsBody td[data-column="comment"] {
    vertical-align: middle;
}
#resultsBody textarea.comment-input {
    min-height: 28px;
    height: 28px;
    padding: 5px 6px;
    line-height: 1.2;
    vertical-align: middle;
}


/* ============================================================
   ПРАВКА КОММЕНТАРИЯ и выравнивание колонок карточки заявки.
============================================================ */

/* Три точки - неприметная кнопка правки у комментария. Большая кнопка
   "Изменить" в каждой записи загромождала бы обсуждение: правят редко,
   а читают постоянно. Кнопка проявляется при наведении на запись. */
.invoice-comment-menu-btn {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    color: #8a97a6;
    border-radius: 4px;
    opacity: 0;
    transition: 0.15s;
}
.invoice-comment-item:hover .invoice-comment-menu-btn,
.invoice-comment-menu-btn:focus {
    opacity: 1;
}
.invoice-comment-menu-btn:hover {
    background: #e8eef5;
    color: #1a2634;
}

.invoice-comment-item {
    position: relative;
}
.invoice-comment-menu {
    position: absolute;
    right: 6px;
    top: 24px;
    background: #fff;
    border: 1px solid #dde4ec;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    z-index: 20;
    overflow: hidden;
}
.invoice-comment-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}
.invoice-comment-menu button:hover {
    background: #eef4fa;
}

textarea.invoice-comment-edit {
    width: 100%;
    min-height: 100px;     /* правка 168: как поле нового комментария */
    line-height: 1.4;
    font-family: inherit;
    font-size: 15px;
    padding: 6px 8px;
    border: 1px solid #bcd3e6;
    border-radius: 6px;
    box-sizing: border-box;
    resize: vertical;
}

/* НАЧАЛО ТЕКСТА СЛЕВА И СПРАВА - НА ОДНОЙ ВЫСОТЕ.
   В левой колонке первым идёт крупная сумма, в правой - заголовок
   "Комментарии": у них разный размер шрифта и разные собственные
   отступы, поэтому строки начинались на разной высоте. Убираем верхние
   отступы у первых элементов обеих колонок и задаём им общую верхнюю
   границу. */
.invoice-detail-facts > *:first-child,
.invoice-detail-comments > *:first-child {
    margin-top: 0;
}
.invoice-detail-facts,
.invoice-detail-comments {
    padding-top: 2px;
}
.invoice-comments-title {
    /* Та же высота строки, что у крупной суммы слева, - чтобы подписи
       начинались на одном уровне. */
    line-height: 1.3;
    padding-top: 2px;
}


/* ============================================================
   Строка фильтров в "Управлении контрагентами" (по правке - "сделай
   эти поля с фильтрами"). Живёт в той же сетке, что шапка и строки,
   поэтому каждое поле стоит ровно под своим столбцом. Прилипает под
   шапкой: при прокрутке длинного списка фильтры остаются на виду.
   См. static/js/contractors.js (renderContractorFilterRow,
   contractorRowMatchesFilters).
============================================================ */
.contractor-filter-row {
    position: sticky;
    top: 38px;
    z-index: 2;
    background: #f4f7f9;
    border-left-color: #8fa3b8;
    padding-top: 6px;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
.contractor-filter-row select,
.contractor-filter-row input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid #cfd8e3;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
}


/* ============================================================
   ЧАТ УЧАСТНИКОВ ФИРМЫ - панель справа (см. static/js/chat.js).
   Выезжает ПОВЕРХ содержимого, а не раздвигает его: сдвиг ломал бы
   горизонтальную прокрутку широких таблиц - сверки, календаря,
   контрагентов.
============================================================ */
/* ============================================================
   ЧАТ - как привычные рабочие мессенджеры (по правке - "кнопка чат
   это очень неудобно, сделай как в битриксе").

   Что изменилось и почему:
     * панель шире (720 вместо 420) и разворачивается на весь экран -
       в 420 пикселях список и переписка мешали друг другу;
     * список слева стал настоящим списком диалогов: кружок с
       инициалами, имя, ПОСЛЕДНЯЯ РЕПЛИКА и время. Раньше там были
       одни фамилии в колонке 140px - кто написал и о чём, приходилось
       выяснять щелчками;
     * сверху списка поиск по людям;
     * в переписке - разделители дней ("Сегодня", "Вчера", дата),
       подряд идущие сообщения одного человека склеиваются в группу,
       а место, докуда вы дочитали, отмечено строкой "Новые
       сообщения";
     * поле ввода растёт под текст, отправка - круглой кнопкой.
============================================================ */
.chat-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 720px;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-direction: column;
    /* Закрытая панель именно УЕЗЖАЕТ, а не прячется display:none -
       иначе при открытии список дёргался бы, перестраиваясь с нуля. */
    transform: translateX(100%);
    transition: transform 0.22s ease;
    z-index: 1200;
}
.chat-panel.open { transform: translateX(0); }
.chat-panel.wide { width: 100vw; }
.chat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--wc-c1);
    color: #fff;
    font-weight: bold;
    flex-shrink: 0;
}
.chat-head-btn,
.chat-close {
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}
.chat-head-btn:hover, .chat-close:hover { background: rgba(255,255,255,0.32); }
.chat-body {
    display: flex;
    flex: 1;
    min-height: 0;
}
.chat-side {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid #e6ecf3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f7f9fb;
}
.chat-search {
    margin: 8px;
    padding: 7px 10px;
    border: 1px solid #dce2ec;
    border-radius: 8px;
    font-size: 14px;
    flex-shrink: 0;
}
.chat-contacts {
    flex: 1;
    overflow-y: auto;
    padding: 0 6px 8px;
}
/* Строка собеседника: кружок с инициалами, имя, последняя реплика. */
.chat-contact {
    display: flex;
    gap: 9px;
    align-items: center;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: #1a2538;
    position: relative;
}
.chat-contact:hover { background: #ecf1f6; }
.chat-contact.active { background: #dde5ee; }
.chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--wc-c2);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.chat-contact-main { flex: 1; min-width: 0; }
.chat-contact-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.chat-contact-name {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.chat-contact-time { font-size: 14px; color: #8b97a3; flex-shrink: 0; }
.chat-contact-last {
    font-size: 14px;
    color: #6b7787;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-contact.has-unread .chat-contact-last { color: #1a2538; font-weight: 600; }
.chat-contact-role { font-size: 14px; color: #8b97a3; }
.chat-contact-unread {
    background: #e74c3c;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 6px;
    line-height: 18px;
    flex-shrink: 0;
    align-self: center;
}
.chat-conversation {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.chat-conv-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e6ecf3;
    flex-shrink: 0;
}
.chat-conv-head .chat-avatar { width: 34px; height: 34px; font-size: 14px; }
.chat-conv-who { min-width: 0; }
.chat-partner-name { font-weight: 600; font-size: 15px; color: #1f2a3e; }
.chat-partner-role { font-size: 14px; color: #8b97a3; }
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #f7f9fb;
}
/* Разделитель дня и строка "новые сообщения". */
.chat-day {
    align-self: center;
    background: #e4ebf2;
    color: #5a6472;
    font-size: 14px;
    border-radius: 10px;
    padding: 2px 12px;
    margin: 10px 0 6px;
}
.chat-new-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c0392b;
    font-size: 14px;
    margin: 8px 0 4px;
}
.chat-new-line::before,
.chat-new-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #f0b6ae;
}
.chat-msg {
    max-width: 78%;
    background: #fff;
    border-radius: 12px;
    padding: 7px 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    align-self: flex-start;
}
/* Своё сообщение - справа и другим цветом: так видно, кто что писал,
   без подписи над каждой строкой. */
.chat-msg.mine {
    align-self: flex-end;
    background: #dff1e4;
}
/* Подряд идущие сообщения одного человека - плотнее и без повтора
   имени: иначе десять коротких реплик выглядят как десять разговоров. */
.chat-msg.same-author { margin-top: -2px; }
.chat-msg-author {
    font-size: 14px;
    font-weight: 600;
    color: #4a6b8a;
    margin-bottom: 2px;
}
.chat-msg-text {
    font-size: 14px;
    color: #1a2538;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-msg-time {
    font-size: 14px;
    color: #8b97a3;
    text-align: right;
    margin-top: 2px;
}
/* ПОЛЕ ВВОДА В ЧАТЕ (по правке - "расширь поле для чата, его вообще
   не видно, куда писать"). Было: узкая строка в одну строку высотой,
   почти сливающаяся с фоном, - на пустом чате её действительно не
   найти. Стало: заметная белая полоса на светлой подложке, высотой в
   три строки, с рамкой и подписью-подсказкой. */
.chat-compose {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #dbe4ec;
    background: #f2f6fa;
    align-items: flex-end;
    flex-shrink: 0;
}
.chat-compose textarea {
    flex: 1;
    resize: none;
    min-height: 68px;          /* примерно три строки - поле видно сразу */
    max-height: 200px;
    padding: 10px 14px;
    border: 1.5px solid #b9c6d4;
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.chat-compose textarea:focus {
    border-color: #2980b9;
    outline: none;
}
.chat-compose textarea::placeholder { color: #8b97a3; }
.chat-send {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--wc-c1);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
.chat-send:hover { background: var(--wc-blue); }
.chat-empty {
    color: #8b97a3;
    font-size: 14px;
    padding: 14px;
    text-align: center;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .chat-panel { width: 100vw; }
}


/* ============================================================
   ЗАДАЧНИК - карточки на канбане и панель открытой задачи.
   Оформление намеренно повторяет согласование счетов: те же колонки
   с цветной подложкой заголовка, те же белые карточки с промежутками.
   Человек работает с обеими досками, и разный вид заставлял бы
   каждый раз перестраиваться.
============================================================ */
.task-card {
    background: #fff;
    border: 1.5px solid #dce7ea;
    /* Правка 157: цветная рамка ровная и тонкая, 1.5px со всех сторон
       (раньше слева 5px) - как у заявок. */
    border-left-width: 1.5px;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.15s;
}
.task-card:hover { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13); }
.task-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.task-kind {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 10px;
    color: #35414f;
    white-space: nowrap;
}
.task-due { font-size: 14px; white-space: nowrap; }
.task-title {
    font-size: 15px;
    font-weight: 600;
    color: #1c2833;
    line-height: 1.3;
    word-break: break-word;
}
.task-people { font-size: 14px; color: #5a6472; margin-top: 5px; }
/* Кнопка "Готово" прямо на доске - только у напоминалок (см.
   пояснение в tasks.js). */
.task-done-btn {
    margin-top: 8px;
    width: 100%;
    border: none;
    background: #27ae60;
    color: #fff;
    border-radius: 8px;
    padding: 6px;
    font-size: 14px;
    cursor: pointer;
}
.task-done-btn:hover { filter: brightness(1.07); }



/* ============================================================
   КАРТОЧКА ЗАДАЧИ - отдельное окно, разделённое на треть и две трети
   (по правке). Слева - параметры (вид, даты, регулярность,
   исполнители), справа - название, текст со скрепкой и обсуждение,
   как в согласовании счетов.
============================================================ */
.task-detail {
    display: grid;
    /* Основное поле слева и ШИРЕ, параметры справа и уже (по правке -
       "поменяй местами, немного убавь ширину параметров и добавь
       ширину основной задаче"). Было 1fr 2fr с параметрами слева. */
    grid-template-columns: 3fr 1fr;
    gap: 18px;
    align-items: start;
    min-height: 60vh;
}
.task-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f7f9fb;
    border: 1px solid #e6ecf3;
    border-radius: 10px;
    padding: 14px;
}
.task-side > label,
.task-side .task-repeat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
    color: #425264;
}
/* Срок = дата + время в одной строке (по правке - "добавь в задачи и
   напоминалки время"). Дата тянется, времени хватает фиксированной
   ширины. */
.task-due-row {
    display: flex;
    gap: 6px;
}
.task-due-row input[type="date"] { flex: 1; min-width: 0; }
.task-due-row input[type="time"] { width: 96px; flex-shrink: 0; }

.task-side input,
.task-side select {
    padding: 8px;
    border: 1px solid #dce2ec;
    border-radius: 7px;
    font-family: inherit;
    font-size: 15px;
}
.task-repeat > span:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #1a2538;
}
/* Соисполнители - галочками, а не многострочным списком с Ctrl:
   людей в фирме немного, а объяснять "держите Ctrl" не нужно. */
.task-co-block {
    border-top: 1px solid #e6ecf3;
    padding-top: 10px;
}
.task-co-title { font-size: 14px; color: #425264; margin-bottom: 6px; }
.task-co-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: #1a2538;
    padding: 3px 0;
    cursor: pointer;
}
.task-hint { font-size: 14px; color: #8b97a3; }

.task-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.task-main-title {
    font-size: 20px;
    font-weight: 600;
    padding: 10px 12px;
    border: 1px solid #dce2ec;
    border-radius: 8px;
    font-family: inherit;
    color: #1c2833;
}
/* Скрепка сидит в углу поля описания - файл прикладывают к тексту, а
   не отдельным действием где-то ниже. */
.task-body-wrap { position: relative; margin-top: 10px; }
.task-main-body {
    width: 100%;
    /* Высота в полтора раза больше прежних 160px (по правке) и растёт
       под текст - см. autoGrowTaskBody в tasks.js. Прокрутка внутри
       маленького окошка прячет половину написанного. */
    min-height: 240px;
    padding: 10px 12px 40px 12px;
    border: 1px solid #dce2ec;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
    box-sizing: border-box;
    overflow: hidden;
}
/* Скрепка в НИЖНЕМ ЛЕВОМ углу поля (по правке - "скрепку не видно,
   перенеси её вниз в левый угол"). Справа сверху она пряталась за
   ползунком прокрутки, и человек её просто не находил. */
.task-clip {
    position: absolute;
    left: 8px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    background: #eef3f8;
    border-radius: 14px;
    padding: 3px 12px;
    cursor: pointer;
    color: #35414f;
}
.task-clip:hover { background: #dfe8f2; }
.task-clip-comment {
    position: static;
    flex-shrink: 0;
    align-self: flex-end;
}
.task-comment-compose {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.task-comment-compose textarea { flex: 1; }
/* Три точки - неприметная кнопка правки комментария, как в счетах. */
.task-comment-menu-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: #8b97a3;
    font-size: 16px;
    line-height: 1;
    padding: 0 3px;
}
.task-comment-menu-btn:hover { color: #35414f; }
.task-comment-file { font-size: 14px; margin-top: 4px; }

/* ============================================================
   ЗНАЧОК ОЖИДАНИЯ ЗАГРУЗКИ (по правке - прислан отдельным файлом).
   Два круга, обводящих окружность по очереди: синий, затем зелёный.
   Заменяет собой неподвижное "⏳ Загрузка...", по которому нельзя
   было понять, идёт работа или программа замерла.

   Рисуется средствами самого браузера (SVG + animate), без картинок
   и без библиотек: одна лишняя картинка - это ещё один файл, который
   может не доехать при обновлении.

   Цвета берутся из общей палитры - поменяется она, поменяется и здесь.
============================================================ */
.loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px;
    color: #425264;
    font-size: 14px;
}
.loading-box.inline {
    flex-direction: row;
    padding: 4px 0;
    gap: 8px;
    font-size: 14px;
}
.loading-spinner {
    width: 34px;
    height: 34px;
    flex: none;
}
.loading-box.inline .loading-spinner { width: 20px; height: 20px; }

/* Непрочитанное в обсуждении задачи - прямо на карточке доски.
   Тот же вид, что у заявок: счётчик отвечает "сколько", а текст -
   "надо ли открывать прямо сейчас". */
.task-unread-badge {
    background: #fdecea;
    color: #c0392b;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 14px;
    font-weight: 600;
}
.task-unread-block {
    margin-top: 5px;
    padding: 5px 7px;
    background: #fdecea;
    border-radius: 6px;
}
.task-unread-line {
    font-size: 14px;
    color: #c0392b;
    margin-bottom: 2px;
    word-break: break-word;
}
.task-unread-line:last-child { margin-bottom: 0; }
/* Ответ прямо с доски, без захода в задачу. */
.task-quick-comment {
    margin-top: 5px;
    display: flex;
    gap: 4px;
    align-items: center;
}
.task-quick-comment input {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    padding: 5px 7px;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
}
.task-quick-comment button {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    background: #fff;
    color: #1c2833;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.task-quick-comment button:hover { background: #eef3f6; }

/* Файлы задачи. РАНЬШЕ открывались сразу, как в счетах, - но в задаче
   с обсуждением это оказалось хуже: страница счёта на 900 пикселей
   отжимала переписку вниз, и до самих комментариев приходилось долго
   прокручивать. Теперь файл свёрнут и раскрывается кнопкой "+", а
   тяжёлое содержимое (PDF, картинка) вообще не загружается, пока его
   не открыли. */
.task-file-toggle {
    background: #fff;
    border: 1px solid #cdd7dd;
    border-radius: 5px;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: 15px;
    font-weight: bold;
    color: #35414f;
    cursor: pointer;
    padding: 0;
    flex: none;
}
.task-file-toggle:hover { background: #eef3f6; }
.task-file-preview { border-top: 1px solid #e0e6ea; }
.task-file-box {
    border: 1px solid #e0e6ea;
    border-radius: 8px;
    margin-top: 8px;
    overflow: hidden;
}
.task-file-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #f4f6f7;
    font-size: 14px;
}
.task-file-head a { flex: 1; }
.task-file-pdf { width: 100%; height: 900px; border: none; display: block; }
.task-file-img { max-width: 100%; display: block; margin: 0 auto; }
.task-comments {
    margin-top: 16px;
    border-top: 1px solid #e6ecf3;
    padding-top: 12px;
}
.task-comments-title { font-weight: bold; font-size: 15px; margin-bottom: 8px; }
.task-comments-list { max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.task-comment-item {
    background: #f7f9fb;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 6px;
}
.task-comment-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: #5a6472;
}
.task-comment-text { font-size: 16px; color: #1a2538; white-space: pre-wrap; margin-top: 3px; }
.task-comment-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #dce2ec;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}
.task-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.task-body-preview {
    white-space: pre-wrap;
    color: #5a6472;
}
/* Шапка задачника - шрифт крупнее (по правке "увеличь шрифт и
   окошко"). */
.tasks-toolbar-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    color: #1a2538;
    cursor: pointer;
}
.tasks-toolbar-check input { width: 17px; height: 17px; }
/* ОДИНАКОВЫЙ РАЗМЕР У ВСЕХ КНОПОК И ПОЛЯ В ШАПКЕ (по правке -
   "почему опять все кнопки разного размера?"). Раньше размеры
   задавались каждому элементу отдельно прямо в разметке, и стоило
   поправить один - остальные оставались прежними. Теперь высота,
   отступы и шрифт заданы здесь, в одном месте, сразу всем. */
.tasks-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    /* ПАНЕЛЬ ОСТАЁТСЯ НА МЕСТЕ ПРИ ПРОКРУТКЕ (по правке - «верхнее поле
       уплыло наверх»). Раньше она прокручивалась вместе с доской: стоит
       промотать колонки вниз - и кнопки с поиском уезжали под заголовок
       окна, наполовину срезанные. Теперь панель прилипает к верху
       области прокрутки: доска едет под ней, сама она стоит.
       Фон у панели непрозрачный (см. ниже), поэтому карточки под ней не
       просвечивают. Уровень выше, чем у закреплённых заголовков стадий
       (у них z-index: 5) - иначе они наезжали бы на панель. */
    position: sticky;
    top: 0;
    z-index: 6;
    /* ЦВЕТ КАК У РАЗДЕЛОВ БОКОВОЙ ПАНЕЛИ (по правке). Тот же приём,
       что и там: полоса раздела темнее (--wc-c1), кнопки внутри
       светлее (--wc-c3). Пёстрая шапка - зелёная кнопка, белая
       кнопка, голое поле поиска - выбивалась из всего остального
       вида программы. Цвета берутся из тех же переменных, что и
       боковая панель: поменяется палитра - поменяется и здесь. */
    background: var(--wc-c1);
    padding: 8px 10px;
    border-radius: 2px;
}
.tasks-toolbar > .btn,
.tasks-toolbar > input[type="text"] {
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
/* Подсказка теперь одно слово («Поиск»), и держать поле
   шириной в 240px незачем: на узком экране оно лишний раз
   переносило кнопки полосы на вторую строку. */
.tasks-toolbar > input[type="text"] { min-width: 160px; }
/* Кнопки внутри полосы - светлые, как кнопки внутри раздела панели.
   !important нужен потому, что у кнопок остаются их прежние классы
   (btn-success и т.п.): цвет класса важен ВНУТРИ окон, где он несёт
   смысл (согласовать/отклонить), а здесь только пестрил бы. */
.tasks-toolbar > .btn {
    background: var(--wc-c3) !important;
    color: var(--wc-text-main) !important;
    border: none !important;
    border-radius: 2px;
    box-shadow: none;
}
.tasks-toolbar > .btn:hover:not(:disabled) {
    background: var(--wc-glass-hover) !important;
    color: var(--wc-text-main) !important;
    transform: none;
    box-shadow: none;
}
.tasks-toolbar > input[type="text"] {
    border: none;
    border-radius: 2px;
    background: #fff;
}
/* Подписи галочек на тёмной полосе - белым, иначе не читаются. */
.tasks-toolbar .tasks-toolbar-check {
    color: #fff;
    background: rgba(255,255,255,0.16);
    border-radius: 2px;
    padding: 0 12px;
    height: 40px;
}

@media (max-width: 900px) {
    .task-detail { grid-template-columns: 1fr; }
}


/* Крестик "убрать проверенную строку" в акте сверки. Неприметный,
   пока на строку не навели: он нужен под рукой, но читать таблицу не
   должен мешать (по правке - "поставь её куда-нибудь справа на каждую
   строку, чтобы не мешала"). */
.acts-compare-table td.acts-del-cell {
    text-align: center;
    padding: 0;
}
/* Крестик удаления счёта в окне "🏦 Банк" - НЕПРИМЕТНЫЙ, как в актах
   сверки (по правке - "сделай такой же невидимый крестик, как в актах
   сверки"): почти незаметен, темнеет при наведении на строку и
   краснеет под курсором. Тот же приём, что .acts-del-btn ниже; своё
   правило, а не общий класс, потому что таблицы разные и правки одной
   не должны молча менять другую. */
.bank-del-cell { width: 34px; text-align: center; }
.bank-del-btn {
    border: none;
    background: none;
    color: #dde4ec;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    transition: color 0.15s;
}
.bank-accounts-table tr:hover .bank-del-btn { color: #8b97a3; }
.bank-del-btn:hover { color: #c0392b; }

.acts-del-btn {
    border: none;
    background: none;
    color: #c9d4e0;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px 6px;
    transition: color 0.15s;
}
.acts-compare-table tr:hover .acts-del-btn { color: #8b97a3; }
.acts-del-btn:hover { color: #c0392b; }


/* ============================================================
   ЧАТ: группы, чат проекта и вложения (по правке - "добавь в чат
   создать групповой чат" и "в проекты добавь кнопку чат").
   ============================================================ */


.chat-group-form { display: none; }
.chat-group-form.open {
    display: block;
    background: #f7fafc;
    border: 1px solid #dbe4ec;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}
.chat-group-title { font-weight: bold; font-size: 14px; margin-bottom: 6px; }
.chat-group-people { max-height: 180px; overflow-y: auto; margin: 6px 0; }
.chat-group-person {
    display: block;
    font-size: 14px;
    padding: 3px 2px;
    cursor: pointer;
}
.chat-group-actions { display: flex; gap: 6px; }

/* У комнаты вместо инициалов - значок: 👥 группа, 📁 чат проекта. */
.chat-avatar-room { background: #dfeaf5; color: #2c3e50; }

/* Вложение, выбранное но ещё не отправленное. */
.chat-pending-file {
    font-size: 14px;
    color: #425264;
    padding: 0 10px 2px;
}
.chat-pending-drop {
    border: none;
    background: none;
    color: #8b97a3;
    cursor: pointer;
    padding: 0 3px;
}
.chat-pending-drop:hover { color: #c0392b; }

.chat-clip {
    cursor: pointer;
    font-size: 18px;
    padding: 0 6px;
    align-self: flex-end;
    line-height: 34px;
    color: #5a6472;
}
.chat-clip:hover { color: #2c3e50; }

/* Картинка прямо в сообщении: скриншот для того и вставляют, чтобы
   его было видно, а не открывать ссылку. */
.chat-msg-image { display: block; margin-top: 4px; }
.chat-msg-image img {
    max-width: 100%;
    max-height: 260px;
    border-radius: 8px;
    display: block;
}
.chat-msg-file {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    color: #2980b9;
    text-decoration: none;
}
.chat-msg-file:hover { text-decoration: underline; }

/* Чат внутри карточки проекта - та же переписка, что в панели, но
   вписанная во вкладку. */
.project-chat { display: flex; flex-direction: column; }
.project-chat-note { font-size: 14px; color: #425264; margin-bottom: 8px; }
.project-chat-messages {
    min-height: 260px;
    max-height: 46vh;
    overflow-y: auto;
    background: #f7fafc;
    border: 1px solid #e6ecf3;
    border-radius: 10px;
    padding: 10px;
}


/* Фото в кружке чата - КРУГЛОЕ и заполняет кружок целиком (по правке -
   "в чатах пусть будет круглое фото"). В личном кабинете то же фото
   показывается квадратом: там оно стоит вровень с полями, а здесь
   читается как "человек". */
.chat-avatar { overflow: hidden; }
.chat-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}


/* Списки в окне "💸 Перевод физ лиц" тянутся до низа экрана (по правке
   - "расширь экран до самого низа"). Раньше у архива стояла жёсткая
   высота 340px: список обрывался на середине, а под ним оставалось
   пустое место, при том что окно занимает весь экран. Высота считается
   от окна браузера, а не от содержимого: так она верна и при десяти
   строках, и при тысяче. */
.it-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 330px);
    min-height: 220px;
}

/* ЗНАЧОК ПОДСКАЗКИ - КНОПКА «ПРИНЯТЬ» (правка 286, её слова 18.09.2026:
   «появляется подсказка, сделай возможность её принять, чтобы она так не
   висела»). Выглядит как значок, а не как кнопка в ряду: он стоит в
   строке таблицы вплотную к имени контрагента, и обычная кнопка ломала
   бы строку. Жёлтый - тот же цвет, что у надписи «подсказано». */
.it-guess-ok {
    border: 1px solid #e6c235;
    background: #fff8e1;
    border-radius: 6px;
    padding: 0 5px;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
}
.it-guess-ok:hover {
    background: #ffe9a8;
}


/* ============================================================
   ПРАВИЛА РАЗНЕСЕНИЯ ПЛАТЕЖЕЙ: список, редактор, полоса о прогоне.
   ============================================================ */
.rules-head { margin-bottom: 12px; }
.rules-hint {
    background: #eef4fa;
    border-left: 3px solid #2980b9;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #1f2a3e;
    margin-bottom: 10px;
}
.rules-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rules-auto { font-size: 14px; color: #425264; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.rules-auto label { cursor: pointer; }
.rules-auto-note { color: #7c8899; }

.rules-table td { vertical-align: top; }
.rules-table .rule-cond,
.rules-table .rule-purpose { font-size: 14px; color: #425264; }
/* Выключенное правило видно, но приглушено: удалять его, чтобы
   временно не работало, - плохой обмен. */
.rules-table tr.rule-off { opacity: 0.5; }
.rule-flag { font-size: 14px; color: #a06010; }
.rules-row-actions { white-space: nowrap; }

.rules-note {
    background: #f7fafc;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #1f2a3e;
    margin: 10px 0;
}
.rules-note-ok { background: #eafaf1; border-color: #cdebd9; }
.rules-note-warn { background: #fdf3e3; border-color: #f0dcb8; }
.rules-note-small { font-size: 14px; color: #7c8899; margin-top: 6px; }

/* ============================================================
   ПОДСКАЗКИ В ОКНАХ КНОПКОЙ (правка 321, вид - по одобренному ею
   образцу 20.09.2026). Блок с data-hint: открытая подсказка - голубая
   плашка с синей полосой, заголовок «💡 Подсказка» и «Свернуть ▲»;
   свёрнутая - маленькая кнопка «💡 Подсказка». См. hints.js.
============================================================ */
.hint-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #b9d3e6; color: #2f6f9f;
    border-radius: 16px; padding: 4px 12px; font-size: 14px; line-height: 1.3;
    cursor: pointer; margin: 4px 0 8px;
}
.hint-btn:hover { background: #eef6fc; }
[data-hint].hint-box {
    background: #eef6fc !important; border: 1px solid #b9d3e6 !important;
    border-left: 4px solid #2f6f9f !important; border-radius: 8px !important;
    color: #1f3a52; padding: 10px 14px !important;
}
[data-hint] > .hint-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-weight: 600; color: #1f3a52; margin-bottom: 4px;
}
[data-hint] > .hint-head .hint-collapse {
    border: none; background: none; color: #2f6f9f; font-size: 14px; cursor: pointer; padding: 0;
    white-space: nowrap;
}
.hints-offer {
    position: fixed; right: 24px; bottom: 24px; width: 380px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18);
    padding: 16px 18px; font-size: 14px; color: #1a2634; z-index: 10050;
}
.hints-offer b { font-size: 16px; }
.hints-offer-text { margin: 8px 0 12px; }
.hints-offer-btns, .hints-help-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hints-offer-note { font-size: 14px; color: #7c8899; margin-top: 8px; }
.hints-help {
    background: #eef6fc; border: 1px solid #b9d3e6; border-left: 4px solid #2f6f9f;
    border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px;
}
.hints-help-btns { margin-top: 8px; }
/* В цветной теме подсказки - в цвет темы, а не голубые. */
body.ui-themed .hint-btn { color: var(--accent); border-color: var(--accent); }
body.ui-themed [data-hint].hint-box,
body.ui-themed .hints-help {
    background: var(--th-row-hover) !important; border-color: var(--accent) !important;
}
body.ui-themed [data-hint] > .hint-head .hint-collapse { color: var(--accent); }
.rules-empty { text-align: center; padding: 24px; color: #425264; }

.rules-editor { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rules-editor h3 { margin: 0 0 14px; }
.rule-line { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.rule-line label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; }
.rule-line input, .rule-line select { padding: 6px; min-width: 220px; }
.rule-block { margin-bottom: 16px; }
.rule-block-title { font-weight: bold; margin-bottom: 8px; }
.rule-block-note { font-weight: normal; font-size: 14px; color: #7c8899; }
.rule-cond-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.rule-cond-row select, .rule-cond-row input { padding: 5px; }
.rule-cond-row input[type="text"] { min-width: 240px; }
.rule-dash { color: #7c8899; }
.rule-add { color: #2980b9; cursor: pointer; text-decoration: underline; font-size: 14px; }
.rule-rest { font-size: 14px; color: #7c8899; }
.rule-flags { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rule-flags label { cursor: pointer; }
.rule-flags .rule-block-note { display: block; margin-left: 22px; }
.rule-buttons { display: flex; gap: 12px; align-items: center; }
.rule-cancel { color: #5a6472; cursor: pointer; text-decoration: underline; }

/* Полоса о прогоне правил - внизу справа, уходит сама через полминуты. */


/* Строка под доской задач. Счётчик «ждут своего дня» отсюда убран
   (правка 283) - он теперь кнопкой в панели; остались только пояснения
   про режим «только напоминалки» и про поиск. */
.tasks-hidden-note {
    margin-top: 10px;
    font-size: 14px;
    color: #425264;
    background: #f7fafc;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    padding: 8px 12px;
}
/* Полоса вкладок отчётов - та же, что у обычных вкладок, но с
   отступом снизу, чтобы не липла к содержимому отчёта. */
.reports-tabs { margin-bottom: 14px; }


/* Окно правил занимает всю ширину экрана (по правке - "расширь
   модальное окно до конца экрана"): редактор больше не жмётся в
   узкую карточку, а таблицы условий и предпросмотра получают всю
   доступную ширину. */
#paymentRulesModal .modal-body { padding-right: 5px; }
.rules-editor {
    width: 100%;
    box-sizing: border-box;
    max-width: none;
}
.rules-editor table { width: 100%; }
/* Значение условия тянется: длинные названия контрагентов не должны
   обрезаться в узком поле. */
.rule-cond-row select,
.rule-cond-row input[type="text"] { min-width: 260px; max-width: 520px; }
.rule-cond-row { flex-wrap: nowrap; overflow-x: auto; }


/* Полоса с текстом ошибки - вверху по центру, поверх всего. */
/* Крестик «скрыть» у нижней полосы. Полоса разметки убрана (её
   правка 08.09.2026), но этим же классом пользуется полоса сообщений
   об ошибке - поэтому вид крестика остаётся здесь. */
.rules-bar-close {
    border: none;
    background: none;
    color: #b9c6d4;
    cursor: pointer;
    font-size: 15px;
    padding: 0 2px;
}
.rules-bar-close:hover { color: #fff; }

.js-error-bar {
    display: none;
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    background: #7f1d1d;
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    max-width: 80vw;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.js-error-bar.open { display: flex; }


/* Сводная строка (реализации / оплачено / закрыто) - в одну строку и
   без лишнего воздуха: она и так самая заметная. */
#rlzSummaryBox { margin-bottom: 6px !important; }
/* Таблица занимает всё, что осталось, и тянется до низа окна. */
#realizationsModal .modal-body { padding-bottom: 0; }
#realizationsModal .tab-content { flex: 1; min-height: 0; }


/* Строка «показаны последние N, скрыто старых M» над таблицами
   штрафов, лизинга, машин и запасов (см. rowlimit.js). */
.row-limit-note {
    background: #f7fafc;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #425264;
}


/* Полоса вкладок «Результатов сверки» - одна на пять окон
   (см. sverkatabs.js). Вкладок восемь, поэтому при узком окне они
   переносятся, а не сжимаются в нечитаемое. */
.sverka-tabs-slot { margin-bottom: 10px; }
.sverka-tabs { flex-wrap: wrap; }
/* «Посчитать сверку» - в ряду вкладок, прижата вправо (правка 288).
   Это действие, а не вкладка: цветной полосы снизу у неё нет, и она
   заметно ниже вкладок, чтобы не читалась как ещё один раздел. */
.sverka-tabs .sverka-recalc {
    margin-left: auto;
    align-self: center;
    padding: 4px 12px;
    font-size: 14px;
    white-space: nowrap;
}
.sverka-tab-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: #e74c3c;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
}


/* ============================================================
   ПОДСВЕТКА СТРОКИ ПОД КУРСОРОМ - ОДНА НА ВСЮ ПРОГРАММУ
   (по правке - «подсветку строки сделай как везде, поправь сразу
   везде»).

   Было пять разных оттенков: #c2f2e8 в организациях, календаре и
   депозите, #dde5ee в таблице сверки и в «Банке», #e3f4f7 в общих
   таблицах. Одна и та же строка под курсором меняла цвет в
   зависимости от окна, и это читалось как «здесь что-то другое».

   Правило стоит В КОНЦЕ файла и потому побеждает все прежние - их не
   удаляю: они разбросаны по файлу вперемешку с рабочими стилями
   таблиц, и точечная чистка рискует задеть лишнее. Цвет один:
   спокойный голубой, заметный на белом и не спорящий с цветными
   строками статусов (оплачено/просрочено), у которых своя заливка.
   ============================================================ */
/* ОТМЕНЕНО ПРАВКОЙ 287 (её выбор «Б» по образцу obrazec_podsvetka.html):
   строка под мышью больше НЕ перекрашивается - её обводит рамка, а
   заливка остаётся своя. Правило рамки - в самом конце файла. Прежний
   текст этого блока (один голубой на все таблицы) и потемнение цветных
   строк лизинга убраны: и то и другое красило строку. */


/* ============================================================
   «С чего начать»: порядок работы на первом экране.
   Показывается новичку, пока он не нажал «Скрыть». Шаги отмечаются
   сами по загруженным данным - человек видит, где находится, а не
   читает инструкцию заново.
   ============================================================ */
.start-steps {
    background: #f7fafc;
    border: 1px solid #dbe4ec;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.start-steps-title {
    font-weight: bold;
    font-size: 16px;
    color: #1f2a3e;
    margin-bottom: 10px;
}
.start-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #e6ecf3;
}
.start-step:first-of-type { border-top: none; }
.start-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dfeaf5;
    color: #1f2a3e;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.start-step-text { flex: 1; font-size: 14px; line-height: 1.35; }
.start-step-note { color: #425264; font-size: 14px; }
.start-step-btn { padding: 4px 12px; font-size: 14px; flex-shrink: 0; cursor: pointer; }
/* Выполненный шаг приглушён, но виден: список шагов не должен
   «худеть» по мере работы - тогда непонятно, что уже сделано. */
.start-step.done { opacity: 0.6; }
.start-step.done .start-step-num { background: #cdebd9; }
.start-steps-foot {
    margin-top: 10px;
    font-size: 14px;
    color: #425264;
}


/* Передача дел при увольнении - в окне «Фирмы», под списком людей. */
.staff-transfer {
    margin-top: 16px;
    background: #f7fafc;
    border: 1px solid #dbe4ec;
    border-radius: 10px;
    padding: 12px 14px;
}
.staff-transfer-title { font-weight: bold; margin-bottom: 6px; }
.staff-transfer-note { font-size: 14px; color: #425264; margin-bottom: 10px; }
.staff-transfer-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.staff-transfer-row select { padding: 5px; min-width: 200px; }
.staff-transfer-result { margin-top: 10px; font-size: 14px; }


/* ============================================================
   ПОМОЩНИК НОВИЧКА - маленькая полоса внизу слева.
   Внизу СЛЕВА, а не справа: справа уже живут полоса о прогоне правил
   и чат, и три окошка в одном углу мешали бы друг другу.
   ============================================================ */
.tutorial-box {
    display: none;
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1100;
    width: 340px;
    max-width: calc(100vw - 36px);
    background: #fff;
    border: 1px solid #dbe4ec;
    border-left: 4px solid #2980b9;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    font-size: 14px;
}
.tutorial-box.open { display: block; }
/* Панель тащат ЗА ШАПКУ - на ней и курсор-крестовина. За остальное
   тянуть нельзя: внутри кнопки, и любое нажатие начинало бы
   перетаскивание. */
.tutorial-head { cursor: move; user-select: none; }
.tutorial-head button { cursor: pointer; }
.tutorial-box.tutorial-dragging { opacity: 0.9; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28); }
.tutorial-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1f2a3e;
    margin-bottom: 6px;
}
.tutorial-progress { color: #7c8899; font-size: 14px; }
.tutorial-close {
    margin-left: auto;
    border: none;
    background: none;
    color: #8b97a3;
    cursor: pointer;
    font-size: 15px;
}
.tutorial-close:hover { color: #1a2634; }
.tutorial-title { font-weight: bold; margin-bottom: 4px; }
.tutorial-text { color: #425264; font-size: 14px; line-height: 1.35; margin-bottom: 10px; }
.tutorial-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tutorial-btn { padding: 5px 12px; font-size: 14px; cursor: pointer; }


/* ============================================================
   ТЕМЫ ОФОРМЛЕНИЯ (по правке — «не только картинки, а полностью
   поменять стиль: кнопки, поля и всё в других оттенках»).
   Тема включается классом на <body> (см. theme.js) и переопределяет
   цвета. Разметка и расчёты не меняются вовсе — только оттенки.

   Почему именно так, а не «перекрасить всё фильтром»: фильтр исказил
   бы и фотографии людей, и сканы счетов, и цветные метки статусов,
   по которым читают таблицу сверки. Здесь меняются только цвета
   оформления, а смысловые (красный «просрочено», зелёный «оплачено»)
   остаются узнаваемыми — просто в тон теме.
   ============================================================ */

/* ------------------------------------------------------------
   ПАЛИТРЫ. Тема — это ТОЛЬКО набор переменных; сами правила
   написаны ниже один раз для класса .ui-themed.

   Так сделано после добавления второй и третьей темы: раньше
   каждое правило было написано отдельно под розовую, и новая тема
   означала бы копию шести десятков строк. Копия неизбежно
   разъезжается: одно правило забыли — и в новой теме посреди
   нежных тонов торчит синяя кнопка. Теперь добавить тему — это
   дописать один блок переменных, и она сразу полная.
   ------------------------------------------------------------ */

/* --- РОЗОВАЯ. Смягчена по правке «сделай понежнее»: фон, поля и
       шапки таблиц стали бледнее, акцент менее резкий. Кнопки
       смягчены умеренно - белые надписи на них должны читаться
       (проверка контраста в test_theme.js). --- */
/* «Голубая (прежняя)» - стандартный фон до правки 158, чтобы можно было
   вернуться одним щелчком в личном кабинете. */
body.theme-blue {
    --wc-c1: #78A2BF;
    --wc-c2: #A8C4D9;
    --wc-c3: #D4E6F0;
    --wc-glass: rgba(255,255,255,0.55);
    --wc-glass-strong: rgba(255,255,255,0.7);
    --wc-glass-hover: rgba(255,255,255,0.85);
}
body.theme-pink {
    --accent: #cf7ba4;
    --accent-dark: #b3648b;
    --bg-app: #fdf3f8;
    --wc-c1: #d49bb8;
    --wc-c2: #eecada;
    --wc-c3: #fbeaf2;
    --wc-text-main: #46293a;
    --wc-text-sub: #7a5c6b;
    --wc-blue: #c47eab;
    --wc-teal: #d89cba;
    --wc-purple: #a98ad2;
    --wc-glass: rgba(255, 255, 255, 0.66);
    --wc-glass-strong: rgba(255, 255, 255, 0.8);
    --wc-glass-hover: rgba(255, 255, 255, 0.92);
    /* Смысловые цвета - приглушены под тему, но остаются узнаваемыми:
       красное - тревога, зелёное - хорошо. Менять им смысл нельзя. */
    --wc-red: #d1466b;
    --wc-orange: #d98a5b;
    --wc-yellow: #d9c05b;
    --wc-green: #5bbf87;
    --wc-green-status: #5bbf9a;
    /* Оформление кнопок, полей и таблиц */
    --th-info: #b97494;      --th-info-h: #a3617f;   /* правка 160: чуть темнее - читаемость не хуже стандартной */
    --th-success: #c2789c;   --th-success-h: #ad6588;
    --th-secondary: #ac95a2; --th-secondary-h: #96808c;
    --th-warning: #d69a6b;
    --th-dark: #8c5975;
    --th-view: #a06b88;
    --th-purple: #a180cd;
    --th-deposit: #dcb083;
    --th-mismatch: #c9838b;
    --th-field-border: #eecbdd;
    --th-field-bg: #fffbfd;
    --th-head-bg: #f8e6ef;
    --th-row-hover: #fdeef6;
    --th-line: #f1d8e6;
    --th-soft-bg: #fdf5f9;
}

/* --- СИРЕНЕВАЯ (правка 210, по её вопросу «есть ещё варианты»). Спокойная,
       не спорит с красным «просрочено» и зелёным «оплачено» --- */
body.theme-lilac {
    --accent: #8f7fc0;
    --accent-dark: #7767a8;
    --bg-app: #f5f3fb;
    --wc-c1: #a99ad6;
    --wc-c2: #d3cbec;
    --wc-c3: #eeeaf8;
    --wc-text-main: #2e2742;
    --wc-text-sub: #5d5477;
    --wc-blue: #7f8fd0;
    --wc-teal: #9a8fd2;
    --wc-purple: #a98ad2;
    --wc-glass: rgba(255, 255, 255, 0.66);
    --wc-glass-strong: rgba(255, 255, 255, 0.8);
    --wc-glass-hover: rgba(255, 255, 255, 0.92);
    /* Смысловые цвета - приглушены под тему, но остаются узнаваемыми:
       красное - тревога, зелёное - хорошо. Менять им смысл нельзя. */
    --wc-red: #d1466b;
    --wc-orange: #d98a5b;
    --wc-yellow: #d9c05b;
    --wc-green: #5bbf87;
    --wc-green-status: #5bbf9a;
    /* Оформление кнопок, полей и таблиц */
    --th-info: #7a6cb0;      --th-info-h: #665a99;   /* правка 160: чуть темнее - читаемость не хуже стандартной */
    --th-success: #8577bd;   --th-success-h: #6f62a3;
    --th-secondary: #9a93ac; --th-secondary-h: #847d96;
    --th-warning: #d69a6b;
    --th-dark: #5f5286;
    --th-view: #7a6aa8;
    --th-purple: #a180cd;
    --th-deposit: #dcb083;
    --th-mismatch: #b3839f;
    --th-field-border: #d9d2ef;
    --th-field-bg: #fdfcff;
    --th-head-bg: #ece7f8;
    --th-row-hover: #f3effc;
    --th-line: #e2dcf2;
    --th-soft-bg: #f8f6fd;
}

/* --- ПЕСОЧНАЯ (правка 210). Тёплая бежевая; жёлтый в таблицах остаётся
       предупреждением, поэтому сам тон приглушён --- */
body.theme-sand {
    --accent: #b8894f;
    --accent-dark: #9c7241;
    --bg-app: #fbf6ee;
    --wc-c1: #d5b183;
    --wc-c2: #ecd9bd;
    --wc-c3: #f8efe1;
    --wc-text-main: #3d3122;
    --wc-text-sub: #6d5c45;
    --wc-blue: #a98a5e;
    --wc-teal: #c2a274;
    --wc-purple: #a98ad2;
    --wc-glass: rgba(255, 255, 255, 0.66);
    --wc-glass-strong: rgba(255, 255, 255, 0.8);
    --wc-glass-hover: rgba(255, 255, 255, 0.92);
    /* Смысловые цвета - приглушены под тему, но остаются узнаваемыми:
       красное - тревога, зелёное - хорошо. Менять им смысл нельзя. */
    --wc-red: #d1466b;
    --wc-orange: #d98a5b;
    --wc-yellow: #d9c05b;
    --wc-green: #5bbf87;
    --wc-green-status: #5bbf9a;
    /* Оформление кнопок, полей и таблиц */
    --th-info: #a57b45;      --th-info-h: #8d683a;   /* правка 160: чуть темнее - читаемость не хуже стандартной */
    --th-success: #a8853f;   --th-success-h: #8f7134;
    --th-secondary: #a99c8a; --th-secondary-h: #918475;
    --th-warning: #d69a6b;
    --th-dark: #7a5f35;
    --th-view: #97753f;
    --th-purple: #a180cd;
    --th-deposit: #dcb083;
    --th-mismatch: #bd8a6a;
    --th-field-border: #e7d6ba;
    --th-field-bg: #fffdf8;
    --th-head-bg: #f4e7d2;
    --th-row-hover: #fbf3e6;
    --th-line: #eddfc8;
    --th-soft-bg: #fcf8f0;
}

/* --- ГРАФИТОВАЯ (правка 210). Серо-синяя, деловая; смысловые красный и
       зелёный на ней видны лучше всего --- */
body.theme-graphite {
    --accent: #5f7385;
    --accent-dark: #4b5d6d;
    --bg-app: #f2f5f7;
    --wc-c1: #9aa9b5;
    --wc-c2: #cbd5dc;
    --wc-c3: #e9eef1;
    --wc-text-main: #232c33;
    --wc-text-sub: #53626d;
    --wc-blue: #6f8699;
    --wc-teal: #85a0ae;
    --wc-purple: #a98ad2;
    --wc-glass: rgba(255, 255, 255, 0.66);
    --wc-glass-strong: rgba(255, 255, 255, 0.8);
    --wc-glass-hover: rgba(255, 255, 255, 0.92);
    /* Смысловые цвета - приглушены под тему, но остаются узнаваемыми:
       красное - тревога, зелёное - хорошо. Менять им смысл нельзя. */
    --wc-red: #d1466b;
    --wc-orange: #d98a5b;
    --wc-yellow: #d9c05b;
    --wc-green: #5bbf87;
    --wc-green-status: #5bbf9a;
    /* Оформление кнопок, полей и таблиц */
    --th-info: #55697a;      --th-info-h: #445667;   /* правка 160: чуть темнее - читаемость не хуже стандартной */
    --th-success: #5a7a6d;   --th-success-h: #49665b;
    --th-secondary: #93a0aa; --th-secondary-h: #7d8a94;
    --th-warning: #d69a6b;
    --th-dark: #3f4d59;
    --th-view: #5d7182;
    --th-purple: #a180cd;
    --th-deposit: #dcb083;
    --th-mismatch: #a97f85;
    --th-field-border: #cfd8de;
    --th-field-bg: #fbfdfe;
    --th-head-bg: #e4ebef;
    --th-row-hover: #eef3f6;
    --th-line: #dbe3e8;
    --th-soft-bg: #f6f9fb;
}

/* --- ЗЕЛЁНАЯ. Шалфейная, а не «сигнальная»: яркая зелень спорила бы
       со смыслом зелёного в таблицах («оплачено»). --- */
body.theme-green {
    --accent: #63a483;
    --accent-dark: #4d8a6b;
    --bg-app: #f0f8f3;
    --wc-c1: #8fbfa5;
    --wc-c2: #c4dfd0;
    --wc-c3: #e4f2ea;
    --wc-text-main: #22392e;
    --wc-text-sub: #4f6b5c;
    --wc-blue: #62a493;
    --wc-teal: #7cb8a2;
    --wc-purple: #8f8ac9;
    --wc-glass: rgba(255, 255, 255, 0.66);
    --wc-glass-strong: rgba(255, 255, 255, 0.8);
    --wc-glass-hover: rgba(255, 255, 255, 0.92);
    --wc-red: #cc5b6f;
    --wc-orange: #d59a6b;
    --wc-yellow: #d3bd63;
    --wc-green: #4f9e74;
    --wc-green-status: #4f9e80;
    --th-info: #5c9a79;      --th-info-h: #4e8a68;   /* правка 160 */
    --th-success: #5fa27e;   --th-success-h: #4f8d6c;
    --th-secondary: #93a297; --th-secondary-h: #7f8d84;
    --th-warning: #d5a172;
    --th-dark: #46705a;
    --th-view: #578268;
    --th-purple: #8f8ac9;
    --th-deposit: #cfae7f;
    --th-mismatch: #c9838b;
    --th-field-border: #cde3d6;
    --th-field-bg: #fbfefc;
    --th-head-bg: #e0f0e7;
    --th-row-hover: #eff8f3;
    --th-line: #d5e8dd;
    --th-soft-bg: #f3faf6;
}

/* --- ЖЁЛТАЯ. Медовая, а не лимонная: чистый жёлтый под белой
       надписью не читается вовсе, поэтому кнопки взяты в охристом
       тоне, а лёгкость даётся фоном и полями. --- */
/* Правка 328 (её выбор по образцу 20.09.2026 - «лимонная»): прежняя
   жёлтая (#c9a144) почти не отличалась от песочной. Теперь жёлтая -
   лимонная, с зеленцой; песочная осталась как была. */
body.theme-yellow {
    --accent: #b9b21e;
    --accent-dark: #98921a;
    --bg-app: #fbfbe6;
    --wc-c1: #dcd65a;
    --wc-c2: #eeeaa0;
    --wc-c3: #f9f7d6;
    --wc-text-main: #35340e;
    --wc-text-sub: #5f5d24;
    --wc-blue: #aea81f;
    --wc-teal: #c7c13a;
    --wc-purple: #9b8ac9;
    --wc-glass: rgba(255, 255, 255, 0.68);
    --wc-glass-strong: rgba(255, 255, 255, 0.82);
    --wc-glass-hover: rgba(255, 255, 255, 0.93);
    --wc-red: #cd5f5f;
    --wc-orange: #d9975b;
    --wc-yellow: #c9c230;
    --wc-green: #6aa870;
    --wc-green-status: #6aa87f;
    --th-info: #8f8a16;      --th-info-h: #7a7612;   /* правка 160 */
    --th-success: #b2ab22;   --th-success-h: #98921d;
    --th-secondary: #99987a; --th-secondary-h: #858468;
    --th-warning: #d99a5b;
    --th-dark: #6f6a10;
    --th-view: #908b18;
    --th-purple: #9b8ac9;
    --th-deposit: #d2cb4c;
    --th-mismatch: #c8827e;
    --th-field-border: #e6e3a8;
    --th-field-bg: #fefef6;
    --th-head-bg: #f3f1c4;
    --th-row-hover: #fafae3;
    --th-line: #e9e7b9;
    --th-soft-bg: #fcfcee;
}

/* ------------------------------------------------------------
   ПРАВИЛА - общие для всех тем. Класс .ui-themed вешается вместе с
   theme-<название> (см. theme.js); у стандартной темы классов нет
   вовсе, поэтому она остаётся ровно такой, какой была.
   ------------------------------------------------------------ */

/* --- Кнопки боковой панели и окон --- */
body.ui-themed .btn-info { background: var(--th-info); }
body.ui-themed .btn-info:hover:not(:disabled) { background: var(--th-info-h); }
body.ui-themed .btn-success { background: var(--th-success); }
body.ui-themed .btn-success:hover:not(:disabled) { background: var(--th-success-h); }
body.ui-themed .btn-secondary { background: var(--th-secondary); }
body.ui-themed .btn-secondary:hover:not(:disabled) { background: var(--th-secondary-h); }
body.ui-themed .btn-warning { background: var(--th-warning); }
body.ui-themed .btn-orgs,
body.ui-themed .btn-dark { background: var(--th-dark); }
body.ui-themed .btn-view { background: var(--th-view); }
body.ui-themed .btn-calendar,
body.ui-themed .btn-purple { background: var(--th-purple); }
body.ui-themed .btn-deposit { background: var(--th-deposit); }
body.ui-themed .btn-org-mismatch { background: var(--th-mismatch); }
body.ui-themed .btn-primary { background: var(--accent); }

/* --- Поля ввода и списки --- */
body.ui-themed input[type="text"],
body.ui-themed input[type="number"],
body.ui-themed input[type="date"],
body.ui-themed input[type="time"],
body.ui-themed input[type="email"],
body.ui-themed input[type="password"],
body.ui-themed select,
body.ui-themed textarea {
    border-color: var(--th-field-border);
    background: var(--th-field-bg);
    color: var(--wc-text-main);
}
body.ui-themed input:focus,
body.ui-themed select:focus,
body.ui-themed textarea:focus {
    border-color: var(--accent);
    outline: none;
}

/* --- Таблицы --- */
body.ui-themed .data-table th,
body.ui-themed .org-table th,
body.ui-themed .payment-table th {
    background: var(--th-head-bg);
    color: var(--wc-text-main);
}
/* Строки таблиц тема больше не закрашивает под мышью (правка 287):
   их обводит рамка цвета темы - см. конец файла. Остальные подсветки
   (списки, контакты в чате, кнопки) остаются заливкой. */

/* --- Вкладки --- */
body.ui-themed .tab-btn.active {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}
body.ui-themed .tabs { border-bottom-color: var(--th-line); }

/* --- Мелочи, которые иначе торчали бы синим --- */
body.ui-themed .rules-hint { background: var(--th-row-hover); border-left-color: var(--accent); }
body.ui-themed .tutorial-box { border-left-color: var(--accent); }
body.ui-themed .row-limit-note,
body.ui-themed .rules-note,
body.ui-themed .tasks-hidden-note,
body.ui-themed .staff-transfer {
    background: var(--th-soft-bg);
    border-color: var(--th-line);
}
body.ui-themed .modal-header { border-bottom-color: var(--th-line); }
body.ui-themed a { color: var(--accent-dark); }


/* Выбор темы в личном кабинете. */
.theme-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.theme-choice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1.5px solid #dbe4ec;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: var(--wc-text-main);
}
.theme-choice:hover { border-color: var(--accent); }
.theme-choice.active { border-color: var(--accent); background: var(--wc-glass); font-weight: bold; }
.theme-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }


/* Предупреждение «эту карточку сейчас открыл другой» (см. locks.js).
   Жёлтое, а не красное: это предупреждение, а не запрет и не ошибка. */
.lock-notice {
    display: none;
    background: #fdf3e3;
    border: 1px solid #f0dcb8;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0 0 10px;
    font-size: 14px;
    color: #6b4a1e;
}
.lock-notice.open { display: block; }


/* Узкий столбец валюты в договорах лизинга (по правке - «узенький
   столбик»). Список короткий, поэтому и поле маленькое: широкое
   отняло бы место у сумм и названий. */
.lz-currency {
    width: 100%;
    min-width: 62px;
    padding: 4px 2px;
    font-size: 14px;
}


/* ============================================================
   ДОГОВОРЫ: список со свёрнутыми карточками.
   ============================================================ */
.contract-row { border: 1px solid #dbe4ec; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.contract-row.open { border-color: var(--accent); }
.contract-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    flex-wrap: wrap;
}
.contract-head:hover { background: #f7fafc; }
/* Без жирного (правка 174): в заголовке карточки договора и письма о зачёте стоит контрагент. */
.contract-title { font-weight: 400; }
.contract-num, .contract-date, .contract-payments { font-size: 14px; color: #425264; }
.contract-toggle { margin-left: auto; color: #8b97a3; }
/* Правка 161: крестик у раскрытой карточки - тот же вид и поворот, что у
   .modal-close (крестика окон). */
.contract-toggle.contract-toggle-close {
    font-size: 29px; line-height: 1; color: #1a2634; display: inline-block; transition: 0.3s;
}
.contract-head:hover .contract-toggle.contract-toggle-close { color: #e74c3c; transform: rotate(90deg); }
.contract-card { padding: 4px 14px 14px; border-top: 1px solid #eef2f6; }
/* Поля карточки документа (договор, письмо, внештатный сотрудник).
   Раньше ширина зависела от содержимого: выпадающий список с длинным
   названием контрагента растягивался на пол-экрана, а «Номер» ужимался
   до наперстка - выглядело как случайная сетка. Теперь колонки
   одинаковые и выравниваются в ряды; поле, которому нужно больше
   места, помечается классом wide и занимает две колонки. */
.contract-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px 14px;
    margin: 12px 0;
    align-items: end;
}
.contract-fields label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; min-width: 0; }
.contract-fields label.wide { grid-column: span 2; }
.contract-fields input,
.contract-fields select { padding: 6px; width: 100%; box-sizing: border-box; }
.contract-file { margin-bottom: 10px; font-size: 14px; }
.contract-section-title { font-weight: bold; margin: 14px 0 4px; }
.contract-hint { font-size: 14px; color: #425264; margin-bottom: 8px; }
.contract-source { font-size: 14px; color: #7c8899; }
.contract-calendar {
    margin-top: 14px;
    background: #f7fafc;
    border: 1px solid #e0e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.contract-actions { margin-top: 14px; }


/* Письма о зачёте: поля карточки и пометка о незаполненном. */
.letter-fields { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.letter-fields label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; }
.letter-fields input, .letter-fields select { padding: 6px; min-width: 200px; }
.letter-incomplete {
    font-size: 14px;
    background: #fdf3e3;
    border: 1px solid #f0dcb8;
    border-radius: 10px;
    padding: 1px 8px;
    color: #a06010;
}


/* ============================================================
   ФИЛЬТРЫ НАД СПИСКАМИ ДОКУМЕНТОВ («📄 Договоры», «📨 Письма о
   зачёте») - по правке «добавь фильтры перед списками, чтобы можно
   было найти быстро».
   ============================================================ */
.doc-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 14px 10px;
    border-bottom: 1px solid #e6ecf1;
}
.doc-filters input[type="text"],
.doc-filters select {
    padding: 5px 9px;
    font-size: 14px;
    border: 1px solid #dbe4ec;
    border-radius: 8px;
    background: #fff;
}
/* Одна строка (по правке «вмести поиски в 1 строку»): поля ужимаются,
   но не в кашу - у поиска приоритет по ширине, остальные ровно
   настолько, чтобы читалась подпись внутри. */
.doc-filters { flex-wrap: nowrap; overflow-x: auto; }
.doc-filters input[type="text"] { min-width: 110px; }
.doc-filters input[type="text"]:first-child { min-width: 130px; flex: 1 1 150px; }
.doc-filters input.doc-filters-extra { max-width: 130px; }
/* Поле даты в браузере широкое из-за встроенного календарика; в строке
   их два, поэтому ужимаем сильнее прочих. */
.doc-filters input[type="date"] { max-width: 128px; padding: 5px 4px; }
.doc-filters select { max-width: 190px; min-width: 100px; }
.doc-filters .doc-filters-label { font-size: 14px; color: #425264; white-space: nowrap; }
.doc-filters > * { flex-shrink: 0; }
.doc-filters .doc-filters-count { white-space: nowrap; }
.doc-filters .doc-filters-count { font-size: 14px; color: #425264; margin-left: auto; }
.doc-filters .doc-filters-reset { padding: 4px 10px; font-size: 14px; }
body.ui-themed .doc-filters { border-bottom-color: var(--th-line); }
body.ui-themed .doc-filters input[type="text"],
body.ui-themed .doc-filters select { border-color: var(--th-field-border); background: var(--th-field-bg); }

/* Файл документа: раскрывается плюсиком, как в заявках на оплату. */
.doc-file-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #f4f6f7;
    font-size: 14px;
    border-radius: 8px;
}
.doc-file-toggle {
    border: 1px solid #dbe4ec;
    background: #fff;
    border-radius: 6px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}
.doc-file-body { border: 1px solid #e0e6ea; border-top: none; border-radius: 0 0 8px 8px; overflow: hidden; }
body.ui-themed .doc-file-head { background: var(--th-soft-bg); }
body.ui-themed .doc-file-toggle { border-color: var(--th-field-border); background: var(--th-field-bg); }
.contract-subject { display: block; margin-top: 10px; font-size: 14px; color: #425264; }
.contract-subject input { width: 100%; margin-top: 4px; }
.letter-original { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: #425264; cursor: pointer; }
.letter-original input { cursor: pointer; }
.letter-original-card { margin-top: 10px; }


/* ============================================================
   БАЛАНС (управленческий) - разделы как в форме №1.
   ============================================================ */
.balance-side-title {
    font-weight: bold;
    font-size: 15px;
    margin: 16px 0 6px;
    letter-spacing: 0.5px;
}
.balance-table td { vertical-align: middle; }
.balance-table tr.balance-section td {
    background: #eef3f7;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}
.balance-table tr.balance-total td { border-top: 2px solid #cfd8e0; font-size: 15px; }
.balance-source { font-size: 14px; color: #7c8899; margin-top: 2px; }
.balance-check {
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.balance-check-ok { background: #eaf7ef; border: 1px solid #bfe3cd; }
.balance-check-warn { background: #fdf3e3; border: 1px solid #eed9b0; }
body.ui-themed .balance-table tr.balance-section td { background: var(--th-head-bg); }
body.ui-themed .balance-check-ok { background: var(--th-soft-bg); border-color: var(--th-line); }
.letter-original-mark { font-size: 14px; color: #7c8899; white-space: nowrap; }

/* ============================================================
   ПОДСВЕТКА ПРИ НАВЕДЕНИИ - В ЦВЕТ ТЕМЫ.
   ============================================================
   По правке: «на зелёной теме голубое пятно». Голубым подсвечивалась
   ячейка «Связанные» в таблице сверки - и оказалось, что это не одно
   место: так же вели себя ещё полтора десятка подсветок (строки
   таблиц, пункты списков, кнопки-скрепки, контакты в чате). Темы
   красили ФОНЫ и рамки, а вот наведение осталось голубым от исходного
   оформления - на зелёной или медовой теме это выглядит как чужое
   пятно.
   Правило одно на все: наведение берёт --th-row-hover текущей темы.
   Перечислять пришлось поимённо: у каждого своя специфичность, и
   общее правило их не перебило бы. */
/* Тема задаёт общий цвет подсветки строк - одной строкой на всю
   программу, вместо перечисления таблиц поимённо. */
body.ui-themed { --row-hover: var(--th-row-hover); }

body.ui-themed .pair-info-clickable:hover,
body.ui-themed .contractor-item-header:hover,
body.ui-themed .composite-item:hover,
body.ui-themed .search-result-row:hover,
body.ui-themed .settings-gear:hover,
body.ui-themed .sg-group-item:hover,
body.ui-themed .manual-review-item:hover,
body.ui-themed .sortable-th:hover,
body.ui-themed .hint-btn:hover,
body.ui-themed .invoice-comment-menu-btn:hover,
body.ui-themed .invoice-comment-menu button:hover,
body.ui-themed .chat-contact:hover,
body.ui-themed .task-clip:hover,
body.ui-themed .task-quick-comment button:hover,
body.ui-themed .task-file-toggle:hover,
body.ui-themed .chat-new-group:hover {
    background: var(--th-row-hover) !important;
}

/* ВЫДЕЛЕНИЕ ТЕКСТА - тоже в цвет темы.
   Второе «голубое пятно» на зелёной теме: браузер подсвечивает
   выделенный текст своим синим, и в узкой колонке «Связанные» это
   выглядит как прямоугольник чужого цвета под строками. Своего стиля
   у выделения не было вовсе - значит работал браузерный.
   Цвет берём мягкий, из палитры темы: выделение должно быть заметным,
   но не спорить с цветом статусов в таблице. */
body.ui-themed ::selection {
    background: var(--th-head-bg);
    color: #1a2538;
}
body.ui-themed ::-moz-selection {
    background: var(--th-head-bg);
    color: #1a2538;
}

/* Полоса «работает старой версией» - одна строка сверху, закрывается.
   Раньше это был блок в пол-экрана поверх работы. */
.restart-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #8e2f2f;
    color: #fff;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.35;
}
.restart-banner b { font-weight: 700; }
.restart-banner-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.restart-banner-close:hover { opacity: 0.75; }

/* Стрелки прокрутки вбок - вместо узкого ползунка (см.
   scrollarrows.js). Полосу прячем: ездят стрелками, как на доске
   согласования счетов.

   ВИД - ОДИН НА ВСЮ ПРОГРАММУ (по правке 07.09.2026: «сделай вместо
   своих такие же»). Образец - её снимки Битрикс24: КРУПНЫЙ
   ПОЛУПРОЗРАЧНЫЙ круг, тонкий тёмный шеврон, при наведении круг
   становится плотнее. Прежние 40px почти белые кружки были вторым
   видом стрелок в программе - именно это она и назвала «два вида».
   Размер и цвета заданы переменными, чтобы менять их в ОДНОМ месте:
   стрелки канбана берут те же самые (см. .kanban-arrow). */
:root {
    --arrow-size: 72px;
    /* Её выбор 08.10.2026 (образец obrazcy_kruzhok_biruza, вариант 2): круг
       прежнего размера, еле видная бирюзовая заливка 10% вместо белой 0.30 -
       виден и на белой таблице, и на подсвеченной строке, текст под ним
       читается; стрелка бирюзовая. Под мышью - плотнее, стрелка темнее. */
    --arrow-bg: rgba(11, 107, 130, 0.10);
    --arrow-bg-hover: rgba(11, 107, 130, 0.22);
    --arrow-ink: #06475a;
    --arrow-ink-soft: rgba(11, 107, 130, 0.85);
}
.hscroll-wrap { position: relative; }
.hscroll-wrap > *::-webkit-scrollbar { height: 0; }
.hscroll-arrow {
    position: absolute;
    /* Высоту можно перетащить мышью - одна на все стрелки программы, как
       у доски счетов (--kanban-arrow-top; её правка 15.10.2026). */
    top: var(--kanban-arrow-top, calc(50% - 36px));
    z-index: 6;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 50%;
    border: none;
    background: var(--arrow-bg);
    color: var(--arrow-ink);
    font-size: 40px;
    font-weight: normal;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hscroll-arrow-left { left: 0; }
.hscroll-arrow-right { right: 0; }
.hscroll-arrow:hover { background: var(--arrow-bg-hover); }
.hscroll-arrow-off { opacity: 0.25; cursor: default; }

/* ============================================================
   ОФОРМЛЕНИЕ 2026 («середина»: плотность как в 1С, подача как в
   современных финансовых сервисах). По правке - образец
   «до/после» одобрен, применить ВЕЗДЕ.

   ПОЧЕМУ ОТДЕЛЬНЫМ СЛОЕМ В КОНЦЕ, А НЕ ПРАВКОЙ ПРЕЖНИХ ПРАВИЛ.
   Цвета и формы зашиты по всему файлу (6000 строк) и ещё в двух
   тысячах инлайновых style= в разметке и JS. Переписать всё сразу -
   значит переписать половину программы и сломать то, что работает.
   Слой в конце побеждает по порядку следования при той же
   специфичности: прежние правила остаются на месте (их читают
   проверки), а видит человек новое. Дальше цвета можно будет
   переносить в переменные постепенно.

   ЧТО СОЗНАТЕЛЬНО НЕ ТРОГАЕМ:
   * размеры окон (.modal, .modal-content: left/width/height) -
     большие окна остаются большими;
   * размеры шрифта в таблицах и высоту строк - чтобы строк на
     экране не стало меньше и они не начали переноситься;
   * ширину боковой панели (--sidebar-w) - от неё считается ширина окон.
   Отступы кнопок УМЕНЬШЕНЫ (было 10px 22px, стало 7px 14px) - в
   панелях с десятком кнопок это наоборот убирает переносы.
============================================================ */
:root {
    /* ШИРИНА БОКОВОЙ ПАНЕЛИ - ОДНИМ ЧИСЛОМ.
       Было 240px, стало 272px (по правке: «немного расширь левую
       панель, чтобы влезло ещё 4 буквы»). От этой же величины
       считаются положение и ширина окон: они начинаются там, где
       панель кончается. Раньше число стояло в трёх местах, и стоило
       поправить одно - окна наезжали на панель или оставляли щель. */
    --sidebar-w: 272px;

    /* Спокойная палитра: один акцент, цвет - только по смыслу. */
    --ink: #17212f;            /* основной текст */
    --ink-2: #55617a;          /* пояснения, подписи */
    --ink-3: #7d879b;          /* заголовки колонок, подсказки */
    --line: #e3e7ee;           /* обычная линия */
    --line-2: #d3d9e4;         /* граница поля ввода, кнопки */
    --surface: #ffffff;        /* карточка, таблица */
    --canvas: #f4f6f9;         /* фон страницы и окон */
    --brand: #2f6f9f;          /* единственный акцент */
    --brand-dark: #275e88;
    --brand-soft: #eaf2f8;     /* заливка активного пункта */
    --ok: #1f7a4d;             /* приход, «оплачено» */
    --bad: #b3261e;            /* расход, долг, ошибка */
    --warn: #a8690b;

    --row-hover: #f2f6fb;
    /* Заметная подсветка строки под мышью - там, где строка длинная и
       уезжает за край экрана (платёжный календарь, правка 209). Обычная
       --row-hover для этого слишком бледная. */
    --row-hover-strong: #BFE6F0;
    --accent: #2f6f9f;
    --accent-dark: #275e88;
    --bg-app: #f4f6f9;
    --card-radius: 10px;
    --pill-radius: 6px;
    --sidebar-bg: #ffffff;
    /* Базовый кегль НЕ уменьшаем: 15px, как было. Уменьшение
       сэкономило бы место, но мелкий текст в бухгалтерии - прямой
       путь к ошибке в цифре. Плотность даёт компактность кнопок, а
       не размер шрифта. */
    --base-font-size: 15px;

    /* Прежние акварельные переменные оставлены (на них ссылаются
       десятки правил выше), но переведены в спокойные тона - иначе
       градиент вылезал бы в шапках, статусах и счётчиках. */
    --wc-c1: #eef1f5;
    --wc-c2: #f4f6f9;
    --wc-c3: #f8fafc;
    --wc-text-main: #17212f;
    --wc-text-sub: #55617a;
    --wc-glass: #ffffff;
    --wc-glass-strong: #ffffff;
    --wc-glass-hover: #f2f6fb;
    --wc-blue: #2f6f9f;
    --wc-teal: #17868d;
    --wc-green: #1f7a4d;
    --wc-green-status: #1f7a4d;
    --wc-red: #b3261e;
    --wc-orange: #a8690b;
    --wc-yellow: #8a7207;
    --wc-purple: #6b4fa1;
}

/* --- ШРИФТ. Прежний стек ('Segoe UI', Tahoma, Verdana) на маке и
   телефоне падал в широкие шрифты, где цифры разной ширины и разряды
   в столбце не совпадают по вертикали. Системный стек даёт родной
   шрифт на каждой системе, а tnum ставит цифры в столбик. --- */
body,
button, input, select, textarea {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body {
    color: var(--ink);
    background: var(--canvas);
}
/* Акварельные пятна убраны: под таблицами они снижали контраст и
   грузили слабые ноутбуки. Своя картинка из личного кабинета
   (body.has-custom-bg) продолжает работать - её правила ниже. */
body::before, body::after { display: none; }
body.has-custom-bg { background-color: var(--canvas); }

/* Цифры в столбик - везде, где считаются деньги. */
.data-table, .deposit-table, table.data-table td, .amount-pos, .amount-neg,
.balance-check, .kpi-table, input[type="number"] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --- КАРТОЧКИ И ОКНА. Размеры окон не трогаем, только фон и углы. --- */
.container {
    border-radius: var(--card-radius);
    border: 1px solid var(--line);
    box-shadow: none;
}
.modal-content {
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* --- БОКОВАЯ ПАНЕЛЬ --- */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Заголовки разделов были белыми по светлому - почти не читались. */
.section-title {
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .6px;
    font-size: 14px;
}
.sidebar .btn,
.sidebar .btn-group .btn {
    background: transparent;
    border: none;
    border-radius: 6px;
    box-shadow: none;
    color: var(--ink-2);
    font-weight: 400;
    padding: 7px 10px;
}
.sidebar .btn:hover:not(:disabled),
.sidebar .btn-group .btn:hover:not(:disabled) {
    background: #f2f5f9;
    color: var(--ink);
    transform: none;
    box-shadow: none;
}
.sidebar .btn.sidebar-btn-active,
.btn-group .btn.sidebar-btn-active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    font-weight: 500;
    box-shadow: inset 2px 0 0 var(--brand) !important;
}

/* --- КНОПКИ. Углы 6px вместо «таблеток» 30px, компактнее, без
   подпрыгивания: в панели из десяти кнопок прыжки - это шум. --- */
.btn {
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled),
.btn:active:not(:disabled) {
    transform: none;
    box-shadow: none;
}
/* Главное действие - одно и синее. */
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
/* Остальные - светлые, цвет проступает при наведении: так видно,
   какая кнопка главная, а «Удалить» не кричит громче всех. */
.btn-secondary,
.btn-warning,
.btn-purple,
.btn-danger {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-2);
}
.btn-secondary:hover:not(:disabled),
.btn-purple:hover:not(:disabled) { background: #f2f5f9; border-color: #b9c2d1; color: var(--ink); }
.btn-warning:hover:not(:disabled) { background: #fdf6e7; border-color: #e8d3a0; color: var(--warn); }
.btn-danger:hover:not(:disabled) { background: #fdf3f2; border-color: #e5b8b4; color: var(--bad); }
/* Подтверждающее действие остаётся зелёным - «Провести», «Оплачено»
   узнаются по цвету, отнимать это нельзя. */
.btn-success { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-success:hover:not(:disabled) { background: #196340; border-color: #196340; }
.btn-outline {
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    border-radius: 6px;
    box-shadow: none;
}
.btn-outline:hover:not(:disabled) { background: #f2f5f9; border-color: #b9c2d1; transform: none; box-shadow: none; }
.toolbar-btn-white {
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--ink);
    box-shadow: none;
}
.toolbar-btn-white:hover:not(:disabled) { background: #f2f5f9; border-color: #b9c2d1; }

/* --- ВКЛАДКИ --- */
.tab-btn {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    padding: 8px 14px;
    border-bottom-width: 2px;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

/* --- ТАБЛИЦЫ. Размер и высота строки прежние - чтобы строк на
   экране осталось столько же и ничего не переносилось. Меняются
   только цвет и регистр заголовков. --- */
.data-table th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-3);
    border-bottom: 1px solid var(--line-2);
}
.data-table td { border-bottom: 1px solid #f1f3f7; color: var(--ink); }
.data-table td.amount-pos, .amount-pos { color: var(--ok) !important; font-weight: 500; }
.data-table td.amount-neg, .amount-neg { color: var(--bad) !important; font-weight: 500; }

/* --- ПОЛЯ ВВОДА --- */
input[type="text"], input[type="number"], input[type="date"], input[type="search"],
input[type="email"], input[type="password"], select, textarea {
    border: 1px solid var(--line-2);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
    border-color: #b9c2d1;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px rgba(47,111,159,.15);
}

/* --- ФОКУС С КЛАВИАТУРЫ. Раньше его не было видно вовсе, а
   бухгалтер ходит по формам с Tab. Показываем только при работе с
   клавиатуры (:focus-visible), мышь рамку не рисует. --- */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-radius: 4px;
}

/* --- ПОДСКАЗКИ И ПЛАШКИ --- */
.rules-note, .contract-hint {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-2);
    font-size: 14px;
}
.rules-note-warn { background: #fdf6e7; border-color: #f0e2c2; color: var(--warn); }
.balance-check { border-radius: 8px; font-size: 14px; }
.balance-check-warn { background: #fdf6e7; border: 1px solid #f0e2c2; color: var(--ink); }

/* --- ПОЧИНКА БЕЛОГО ТЕКСТА НА ПОСВЕТЛЕВШЕМ ФОНЕ.
   Прежние правила красили текст белым поверх насыщенного
   акварельного градиента (--wc-c1/c2). Градиент стал светлым, и
   белый текст на нём пропал бы. Ниже - все такие места. --- */
.chat-head { background: var(--brand); color: #fff; }
.chat-avatar { background: var(--brand-soft); color: var(--brand); }
.chat-send { background: var(--brand); color: #fff; }
.chat-send:hover:not(:disabled) { background: var(--brand-dark); }
.chat-close { background: rgba(255,255,255,0.18); color: #fff; }
.section-toggle { background: #eef1f5; color: var(--ink-3); }
.tasks-toolbar { background: var(--surface); border: 1px solid var(--line); }
.tasks-toolbar .tasks-toolbar-check { background: #f2f5f9; color: var(--ink); }
.sidebar .logo { color: var(--ink); font-weight: 600; }
.org-table th, .deposit-table th { background: #eef1f5; color: var(--ink-3); font-weight: 600; }
.metric-card { background: var(--surface); border: 1px solid var(--line); }

/* --- ОДИНАКОВО ВО ВСЕХ ОКНАХ. Шапки, счётчики и «стеклянные»
   панели раньше опирались на градиент; теперь это ровные светлые
   поверхности. --- */
.white-block, .modal-header, .modal-toolbar {
    border-radius: 8px;
}
.white-block { background: var(--surface); border: 1px solid var(--line); }
.card-gray.active { background: #4b5568; color: #fff; }
.btn-counter.is-unread, .sverka-tab-count, .chat-contact-unread { background: var(--bad); }
.list-item .restore-btn, .contact-actions a { background: var(--brand); }
.btn-info { background: #17868d; }
/* Её выбор 11.09.2026 (вариант C образца obrazec_2_temnye_knopki.png):
   тёмно-серый #3b4657 заменён бирюзовым #137A8C - тем же, что у полос
   в «Долгах по закрывающим». Правка 192. */
.btn-dark, .btn-view, .btn-orgs { background: #137A8C; }
.btn-dark:hover:not(:disabled), .btn-view:hover:not(:disabled), .btn-orgs:hover:not(:disabled) { background: #0F6272; }
.btn-org-mismatch { background: var(--warn); }
.btn-calendar { background: var(--brand); }
.status-green { background: var(--ok); }

/* ============================================================
   ЕДИНЫЙ КЕГЛЬ 14/15 (по правке - «шрифт на всех страницах в едином
   стиле, размер 14 и 15, меньше не нужно»).
   Всё, что было 10-13px, поднято до 14px - и в этом файле, и в
   инлайновых стилях разметки и JS. Ниже - места, где под больший
   текст нужно было увеличить саму коробку: значки-счётчики с
   заданными шириной и высотой обрезали бы цифру.
============================================================ */
.sverka-tab-count,
.chat-contact-unread,
.btn-counter.is-unread {
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    padding: 0 6px;
    border-radius: 11px;
}
.section-toggle { width: 20px; height: 20px; line-height: 20px; }
.calendar-file-btn { width: 28px; height: 28px; line-height: 28px; }
.comment-input, textarea.comment-input { min-width: 110px; }
textarea.comment-input { height: 34px; }
.action-select { min-width: 120px; }
.lz-currency { width: 74px; }

/* --- БОКОВАЯ ПАНЕЛЬ: ТЕКСТ ЧЕРНЕЕ (по правке).
   Пункты меню были серо-синими (--ink-2) - на белом фоне читались
   бледно. Теперь основной тёмный цвет, а различие «обычный/активный»
   держится на заливке и синей полосе, а не на бледности текста. --- */
.sidebar .btn,
.sidebar .btn-group .btn {
    color: var(--ink);
}
.sidebar .section-title { color: #46506a; font-weight: 600; }
.sidebar .btn .icon { opacity: 1; }

/* ============================================================
   «💰 СОГЛАСОВАНИЕ СЧЕТОВ» - окно с доской стадий (по правке -
   «ты забыл поправить стили в согласовании счетов»).
   Оно почти всё нарисовано инлайновыми стилями в invoices.js, и общий
   слой до него не доставал: кнопки верхнего ряда оставались строго
   прямоугольными (border-radius: 0 !important), полоса прокрутки
   колонок - бирюзовой из прежней палитры, заголовки стадий - жирными
   18px. Приводим к общему виду, НЕ трогая ширину колонок (272px) и
   высоту доски: число карточек на экране прежнее.
============================================================ */
.toolbar-btn-white,
#invoicesToolbar .btn {
    border-radius: 6px !important;
}
#invoicesToolbar .btn {
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500;
}
.kanban-stage-header {
    font-size: 15px !important;
    /* Без жирного (по правке 01.09.2026): в доске стадий заголовок и
       так выделен рамкой и цветной полосой, жирный добавлял шума. */
    font-weight: 500 !important;
    color: var(--ink) !important;
    border-radius: 6px !important;
}
.kanban-column-body {
    scrollbar-color: #b9c2d1 #eef1f5;
}
.kanban-column-body::-webkit-scrollbar-track { background: #eef1f5; }
.kanban-column-body::-webkit-scrollbar-thumb { background: #b9c2d1; }
.kanban-column-body::-webkit-scrollbar-thumb:hover { background: #97a2b4; }
/* ЗДЕСЬ БЫЛО ПЕРЕКРЫТИЕ ВИДА СТРЕЛОК - УБРАНО 07.09.2026.
   Оформление 2026 делало круг сплошным, с рамкой и без тени, то есть
   отменяло ровно то, ради чего стрелки рисовались по образцу
   Битрикс24 (крупные и полупрозрачные). Её слова: «они большие, но
   полупрозрачные, это очень удобно - именно эти». Вид задан один раз
   в .kanban-arrow / .hscroll-arrow через переменные --arrow-*. */
/* Кнопки решения в карточке заявки: «да» - зелёная, «нет» - красная
   (узнаются по цвету, отнимать нельзя), остальные - светлые. */
.btn-decision-yes, .btn-composite-approve, .btn-approve { background: var(--ok); border-color: var(--ok); }
.btn-decision-no, .btn-composite-reject { background: var(--bad); border-color: var(--bad); }
/* КНОПКИ РЕШЕНИЯ НА ДОСКЕ - ПРИГЛУШЕННЕЕ, ЧЕМ В КАРТОЧКЕ.
   Её правка 08.09.2026: «убавь чуть-чуть яркость в согласовании
   счетов на кнопках согласовать и отклонить в канбане». В карточке
   заявки такая кнопка одна, а на доске их видно сразу десяток, и
   сплошные зелёные с красными рябят. Цвет тот же по смыслу (зелёное -
   «да», красное - «нет», отнимать нельзя), просто менее насыщенный;
   при наведении возвращается полный - чтобы было видно, на что
   наводишь. Значения - переменными: менять в одном месте. */
:root {
    /* Z-20 (её правка 24.09.2026: «кнопки красные и зелёные немного
       выбиваются», выбор - вариант Е «мягкая сплошная»): светлее
       прежних #367556 / #a94741, текст белый; под мышью - полный
       --ok / --bad, как раньше. */
    /* Z-26 (её правка 25.09.2026: «слишком блёклые кнопки согласовать и
       отклонить… посмотри на цвет зелёного в задачнике - на кнопке
       готово»; красный - вариант «б»): зелёный = «✅ Готово» в
       Задачнике (#27ae60), красный #D14B4B. Под мышью - по-прежнему
       --ok / --bad (темнее). */
    /* ЧУТЬ ТЕМНЕЕ - РАДИ БЕЛОГО ТЕКСТА (её правка 26.09.2026: «кнопка
       согласовать белым текстом, он расплывается, можно сделать его
       более чётким?»).
       Белый текст на заливке читается тем хуже, чем она светлее; для
       такого текста нужно отношение контраста 4,5:1. Было: зелёная
       #27ae60 давала 2,9:1 - почти вдвое ниже нормы, отсюда и
       «расплывается»; красная #D14B4B - 4,4:1. Стало 4,8:1 и 4,9:1.
       Цвет по смыслу тот же, приглушённость относительно карточки
       заявки сохранена: там по-прежнему насыщенные --ok / --bad. */
    --ok-soft: #1A8348;
    --bad-soft: #C9403F;
}
/* Подпись на доске - жирнее, чем обычная кнопка решения (600): белый
   текст на цветной заливке в мелком размере выглядит рыхлым, лишние
   полвеса дают ему край. Её правка 26.09.2026. */
.kanban-decision .btn-decision-yes,
.kanban-decision .btn-decision-no { font-weight: 700; }
.kanban-decision .btn-decision-yes { background: var(--ok-soft); border-color: var(--ok-soft); }
.kanban-decision .btn-decision-no { background: var(--bad-soft); border-color: var(--bad-soft); }
.kanban-decision .btn-decision-yes:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); }
.kanban-decision .btn-decision-no:hover:not(:disabled) { background: var(--bad); border-color: var(--bad); }
.btn-decision-closing { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.btn-decision-closing:hover:not(:disabled) { background: #f2f5f9; border-color: #b9c2d1; }
.invoice-comments-box, .invoice-detail-facts, .invoice-detail-comments {
    border-radius: 8px;
}
.invoice-comment-item { border-radius: 6px; }
.invoice-info-table > .k { color: var(--ink-3); }
.invoice-info-table > .v { color: var(--ink); }

/* ============================================================
   ОДИН ВИД У ВСЕХ РЯДОВ КНОПОК И ВКЛАДОК (по правке - «сделай всё
   одинаково, почему все страницы разные?»).

   ОТКУДА БРАЛАСЬ РАЗНИЦА. Ряды кнопок в разных окнах писались в
   разное время и каждый со своим набором правил, часть - с
   !important: шапка «Счетов» (.toolbar-btn-white) имела свою белую
   кнопку 40px высотой с бирюзовой рамкой и тенью при наведении;
   боковая панель (.btn-group .btn) - свою заливку !important; полосы
   вкладок (.tabs/.tab-btn) вообще не имели ни рамки, ни фона - на
   экране «Составные суммы» это читалось как строчки текста, и при
   наведении ничего не менялось. Общий слой оформления до всего этого
   не доставал: !important бьёт порядок следования.

   Ниже - единые правила для трёх видов рядов. Размеры окон, ширина
   боковой панели и высота строк таблиц не трогаются.
============================================================ */

/* --- 1. ВКЛАДКИ. Были невидимым текстом - стали различимыми
   кнопками-переключателями: белая с рамкой, выбранная - голубая с
   синим текстом. Одинаково в «Составных суммах», «Реализациях»,
   платёжном календаре и всюду, где есть .tabs. --- */
.tabs {
    border-bottom: none;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tab-btn {
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-bottom: 1px solid var(--line-2);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    min-height: 34px;
}
.tab-btn:hover:not(.active) {
    background: #f2f5f9;
    border-color: #b9c2d1;
    color: var(--ink);
}
.tab-btn.active {
    background: var(--brand-soft);
    border-color: var(--brand);
    border-bottom-color: var(--brand);
    color: var(--brand);
}

/* --- 2. ВЕРХНИЕ РЯДЫ КНОПОК В ОКНАХ («Счета», акты, сверка). Та же
   форма и то же наведение, что у обычной кнопки: раньше здесь была
   бирюзовая рамка с тенью, из-за чего «Согласование счетов»
   выделялось сильнее остальных окон. --- */
.toolbar-btn-white,
#invoicesToolbar .btn {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 6px !important;
    height: 34px;
    min-height: 34px;
    box-shadow: none !important;
}
.toolbar-btn-white:hover:not(:disabled),
#invoicesToolbar .btn:hover:not(:disabled) {
    background: #f2f5f9 !important;
    border-color: #b9c2d1 !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transform: none;
}
.toolbar-btn-white.sidebar-btn-active,
#invoicesToolbar .btn.sidebar-btn-active {
    background: var(--brand-soft) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

/* --- 3. БОКОВАЯ ПАНЕЛЬ. Пункты были белыми плитками со своей
   заливкой !important - теперь плоские строки, как задумано: текст
   тёмный, наведение светло-серое, выбранный пункт голубой с синей
   полосой слева. --- */
.sidebar .btn-group .btn {
    background: transparent !important;
    color: var(--ink) !important;
    border: none !important;
    border-radius: 6px !important;
    min-height: 36px;
    box-shadow: none !important;
}
.sidebar .btn-group .btn:hover:not(:disabled) {
    background: #f2f5f9 !important;
    color: var(--ink) !important;
}
/* Кнопка открытого окна - вариант «Б» из образца (её выбор
   20.09.2026, правка 319): прежняя бледная заливка с полоской в 2 точки
   была почти не видна («нажала перевод физ лиц, но он вообще никак не
   подсвечен»). Заливка заметнее, полоса 4 точки, текст жирный; под
   мышью остаётся такой же - иначе наведение её стирало. */
.sidebar .btn-group .btn.sidebar-btn-active,
.sidebar .btn-group .btn.sidebar-btn-active:hover:not(:disabled) {
    background: #d3e4f1 !important;
    color: var(--brand) !important;
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 var(--brand) !important;
}

/* Обычная кнопка - та же высота, что у рядов выше: в одном окне не
   должно быть кнопок трёх разных высот. */
.btn { min-height: 34px; }


/* ============================================================
   УЗКИЙ ЭКРАН: панель уже, окна сдвигаются вместе с ней.
   Меняем ПЕРЕМЕННУЮ, а не ширину панели: от неё же считаются
   положение и ширина окон, иначе между панелью и окном появилась бы
   щель.
   Правило стоит В КОНЦЕ ФАЙЛА намеренно: у него та же
   значимость, что у :root выше, и при равной значимости побеждает
   последнее - выше по файлу оно просто не сработало бы.
   ============================================================ */
@media (max-width: 1024px) {
    :root { --sidebar-w: 240px; }
}

/* ЛУС: строка, с которой работают, подсвечена (её правка 06.09.2026:
   «при работе со строкой добавь подсветку»). */
/* Правкой 287 заливка под мышью отменена и здесь: строку обводит рамка
   (правило в конце файла). Строка, в которую вводят, остаётся жёлтой -
   это смысл («здесь работают»), а не подсветка под мышью. */
.lus-row.lus-active td { background: #fff3cd !important; }

/* ЛИЗИНГ: ШАПКА ТАБЛИЦЫ НЕ УЕЗЖАЕТ, СТРОКИ НЕ РАСПУХАЮТ.
   Её правка 09.09.2026: «закрепи шапку, чтобы не уезжала вверх» и
   «плашка "оплачено" расширяет строки - сделай её по ширине строки».
   Прокручивается только ящик с таблицей: если ездит само окно, липкая
   шапка уезжает вместе с ним (та же беда была в платёжном календаре). */
#leasingModal .modal-body { overflow: hidden; }
#lzTableBody, #lzContractsBody, #lzPortfolioBody, #lzAllPaymentsBody {
    overflow: auto;
    /* Запас на время загрузки. Настоящую высоту - до низа экрана - ставит
       fitbottom.js по месту (правка 298): число «на глаз» не знало о
       плашках над таблицей, и поле кончалось раньше низа. */
    max-height: calc(100vh - 320px);
}
/* ПОЛЕ ДО НИЗА ЭКРАНА (правка 298): ящик теперь всегда высотой до низа,
   даже когда строк мало, - и у ящиков без своего фона белым должно быть
   само поле, иначе ниже последней строки проглядывал бы фон окна. У
   досок (столбики) и сверки (белый блок) фон уже свой - их не трогаем. */
#lzTableBody, #lzContractsBody, #lzPortfolioBody, #lzAllPaymentsBody, #lzRatesBody, #lzNewPayBody,
.it-scroll, .table-scroll, .fit-bottom {
    background: var(--surface, #ffffff);
}
#leasingModal .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f4f7fa;
    box-shadow: 0 1px 0 #e0e6ea;
}
#leasingModal .lz-nowrap { white-space: nowrap; }
#leasingModal .lz-status {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
}

/* Вопрос посреди экрана (askConfirm в ui.js, правка 147). Поверх любого
   окна, по центру всего экрана - не над боковой панелью и не у верхнего
   края, как у встроенного confirm(). */
.ask-confirm-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(20, 30, 45, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.ask-confirm-box {
    background: #fff; border-radius: 12px; padding: 22px 26px;
    max-width: 480px; width: calc(100% - 40px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-size: 15px; color: #1a2634;
}
.ask-confirm-title { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.ask-confirm-text { line-height: 1.45; }
.ask-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
/* Название правила в списке правил - им же оно и открывается (правка 147). */
.rules-table .rule-open {
    cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.rules-table .rule-open:hover { color: #1f6fb2; }

/* «📋 Долги по закрывающим» прокручивается (правка 153). Окно - колонка
   во весь экран с overflow: hidden, а прокрутка у .modal-body держится на
   flex: 1. Здесь .modal-body лежал внутри обёрток вкладок, которые не
   тянулись по высоте, - список уходил за край, и прокрутить его было
   нельзя. Обёртки вкладок сами становятся колонками на всю высоту. */
#debtsModal #debtsDocsTab,
#debtsModal #debtsPayablesTab {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#debtsModal .modal-body { min-height: 0; }
/* Сотрудник - заголовок с плюсиком, документы раскрываются по щелчку. */
/* Цвет полос с сотрудниками - её выбор 11.09.2026 по образцу
   obrazec_cvet_knopok.png (четвёртая картинка, вариант C #137A8C):
   «изменить только эти тёмные поля». Тёмно-синий #2c3e50 на светлом
   бирюзовом фоне выглядел чужим. Остальные тёмные кнопки программы
   (.btn-dark/.btn-view/.btn-orgs) НЕ трогаем - по ним ждём её решения
   отдельно. Правка 182. */
.debts-person-head {
    font-weight: bold; font-size: 16px; padding: 8px 10px; background: #137A8C; color: #fff;
    border-radius: 6px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px;
    transition: background 0.15s;
}
.debts-person-head:hover { background: #0F6272; }
.debts-person-head.open { border-radius: 6px 6px 0 0; }
.debts-person-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    border-radius: 50%; background: rgba(255,255,255,0.18); font-size: 18px; line-height: 1; flex: none;
}

/* «🧑‍🔧 Сотрудники вне штата» - таблица по разделам (правка 154). */
.freelancers-table .freelancers-section td {
    background: #2c3e50; color: #fff; font-weight: 700; font-size: 15px; padding: 7px 10px;
}
.freelancers-table .freelancer-row { cursor: pointer; }
.freelancers-table .freelancer-row.open td { background: #eef4fb; }
.freelancers-table .freelancer-card-row > td { background: #fff; padding: 0 6px 10px; }

/* ПРАВКА 160 - цвета «микс» в остальных местах. */
/* Карточки над таблицей сверки: цветная полоса снизу, как у плашек стадий. */
.metric-card.card-total, .metric-card.card-green, .metric-card.card-yellow,
.metric-card.card-warning, .metric-card.card-red {
    border-left: none !important;
    border-bottom: 6px solid #22B9FF !important;
    border-radius: 8px !important;
}
.metric-card[data-filter="work"] { border-bottom-color: #00ADF2 !important; }
.metric-card[data-filter="all"] { border-bottom-color: #10E5FC !important; }
.metric-card[data-filter="green"] { border-bottom-color: #7FE3C4 !important; }
.metric-card[data-filter="org_mismatch"] { border-bottom-color: #D4A5F5 !important; }
.metric-card[data-filter="red"] { border-bottom-color: #FF9EBB !important; }
/* Полоса под заголовком окна - цвет раздела. */
.modal-header h2 { padding-bottom: 6px; border-bottom: 3px solid #22B9FF; }
#tasksModal .modal-header h2, #actsModal .modal-header h2 { border-bottom-color: #7FE3C4; }
#reconciliationModal .modal-header h2, #listModal .modal-header h2, #orgMismatchModal .modal-header h2, #debtsModal .modal-header h2 { border-bottom-color: #B8B5FF; }
#paymentRulesModal .modal-header h2, #splitModal .modal-header h2 { border-bottom-color: #10E5FC; }
#realizationsModal .modal-header h2, #salesModal .modal-header h2, #kpiModal .modal-header h2 { border-bottom-color: #A6E3A1; }
#contractorModal .modal-header h2, #freelancersModal .modal-header h2, #employeesModal .modal-header h2, #trainingModal .modal-header h2 { border-bottom-color: #D4A5F5; }
#orgsModal .modal-header h2, #viewModal .modal-header h2, #paymentCalendarModal .modal-header h2 { border-bottom-color: #00ADF2; }
#analysisModal .modal-header h2, #dashboardModal .modal-header h2 { border-bottom-color: #FF9EBB; }

/* ✉️ Реестр писем (правка 162). */
.letter-row { cursor: pointer; }
.letter-row.open td { background: #eef4fb; }
.letter-card-row > td { background: #fff; padding: 0 6px 10px; }
.letter-card { padding: 10px 6px 4px; }
.letter-card-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 10px 14px; }
.letter-card-grid label, .letter-card label { font-size: 14px; color: #425264; }
.letter-card input[type="text"], .letter-card input[type="date"], .letter-card input[type="number"], .letter-card select, .letter-card textarea {
    width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #b9c6d4; border-radius: 6px; font-size: 14px; color: #0B2230;
}
.letter-rules { background: #f4f8fa; border: 1px solid #dfe6e9; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.letter-rule-block { background: #fff; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.letter-rule-block input, .letter-rules code { font-size: 14px; }

/* ============================================================
   ФОН ПРОГРАММЫ - СВЕТЛАЯ БИРЮЗА (правка 173, её выбор 11.09.2026
   по образцу «Светлый 1»: «первый вариант согласован, примени везде
   как фон и используй эти цвета в будущем»).

   Раньше окна были закрыты сплошной светло-серой заливкой (--canvas),
   и согласованная бирюза под ними не была видна. Теперь фон один на
   всю программу: страница и каждое окно - один и тот же градиент,
   слева насыщеннее, вправо светлеет; белые карточки, таблицы и панели
   лежат на нём. Цвета - переменными: менять в одном месте.
   --bg-ink - тёмная бирюза для текста, который стоит прямо на фоне
   (заголовок окна, крестик, суммы под стадиями).
   ============================================================ */
:root {
    --bg-c1: #8FCFDC;
    --bg-c2: #B9E2EA;
    --bg-c3: #E3F4F7;
    --bg-ink: #0B4F5E;
    --app-bg: linear-gradient(115deg, var(--bg-c1) 0%, var(--bg-c2) 50%, var(--bg-c3) 100%);
}
/* ГРАДИЕНТ ПИШЕМ ПРЯМО ЗДЕСЬ, а не через var(--app-bg) (правка 210).
   Подстановка var() происходит там, где объявлена переменная: --app-bg
   объявлен в :root, и цвета в него подставились сразу из :root. Тема
   меняет --bg-c1..3 на body - но --app-bg от этого не пересчитывался, и
   фон оставался бирюзовым при любой теме. Здесь переменные читаются на
   самом элементе, поэтому тема работает. --app-bg оставлен: на него
   ссылаются другие правила. */
body {
    background: linear-gradient(115deg, var(--bg-c1) 0%, var(--bg-c2) 50%, var(--bg-c3) 100%);
    background-attachment: fixed;
}
.modal {
    background: linear-gradient(115deg, var(--bg-c1) 0%, var(--bg-c2) 50%, var(--bg-c3) 100%);
    background-attachment: fixed;
}
.modal-content {
    background: transparent;
}
.modal-header h2 { color: var(--bg-ink); }
.modal-close { color: var(--bg-ink); }
/* Темы из личного кабинета красят фон своими цветами, как и раньше. */
body.theme-blue, body.theme-pink, body.theme-green, body.theme-yellow,
body.theme-lilac, body.theme-sand, body.theme-graphite {
    --bg-c1: var(--wc-c1);
    --bg-c2: var(--wc-c2);
    --bg-c3: var(--wc-c3);
}
/* Своя картинка из личного кабинета - и на странице, и в окнах (под
   лёгкой белой вуалью, чтобы текст на ней читался). */
body.has-custom-bg,
body.has-custom-bg .modal {
    background: linear-gradient(rgba(255,255,255,0.45), rgba(255,255,255,0.45)), var(--custom-bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* ============================================================
   СТАДИИ - УЗКИЕ ЦВЕТНЫЕ ПЛАШКИ (правка 173, тот же согласованный
   образец): название стадии и число на плашке цвета стадии, сумма -
   под плашкой тёмной бирюзой. Один вид на всех досках: согласование
   счетов (канбан и «Мои задачи»), задачник, воронка продаж. Разметку
   даёт одна функция stagePlateHtml (ui.js).
   ============================================================ */
.kanban-stage-header.stage-plate-wrap {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    margin: 0 0 10px 0 !important;
}
.stage-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    color: #0f2e38;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(20, 90, 110, 0.18);
}
.stage-plate-title { overflow: hidden; text-overflow: ellipsis; }
.stage-plate-count { opacity: 0.65; font-weight: 500; flex-shrink: 0; }
.stage-plate-below {
    color: var(--bg-ink);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}
.stage-plate-note {
    color: var(--bg-ink);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
}
.stage-plate-note.is-late { color: #b3261e; }

/* Плашка-пояснение, которая бывает пустой: пустую не показываем (иначе на
   фоне висела бы пустая жёлтая полоска). Правка 173. */
.on-bg-optional:empty { display: none; }

/* ============================================================
   ПОЛЕ КОММЕНТАРИЯ В ЗАЯВКЕ: СКРЕПКА В ПРАВОМ НИЖНЕМ УГЛУ (правка 179,
   её правка 11.09.2026). Скрепка лежит ВНУТРИ поля, а не сбоку от него,
   и стала заметной - кружок в цвет программы, а не серый значок.
   Место под неё освобождено отступом справа у самого поля: иначе
   набранный текст уезжал бы под скрепку.
   ============================================================ */
.invoice-comment-compose {
    position: relative;
}
.invoice-comment-compose .invoice-comment-input {
    padding-right: 52px;
}
.invoice-comment-clip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    border-radius: 50%;
    /* Кружок цвета кнопки «Отправить» под полем, скрепка белая - её
       правка 14.09.2026: «сделай скрепку белой, а фон как кнопка внизу».
       Берём ту же переменную --brand, что у .btn-primary: перекрасят
       кнопку - перекрасится и кружок, сами собой не разойдутся. */
    background: var(--brand, #2f6f9f);
    color: #fff;
    box-shadow: 0 2px 6px rgba(20, 90, 110, 0.35);
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.invoice-comment-clip:hover {
    /* И при наведении - как у кнопки «Отправить». */
    background: var(--brand-dark, #275e88);
    transform: scale(1.08);
}

/* ============================================================
   ДОГОВОРЫ ТАБЛИЦЕЙ (правка 188, её правка 11.09.2026: «сделай кнопку
   договоры тоже столбиками как телефоны, в виде таблицы с сортируемыми
   полями»). Заголовок столбца - кнопка сортировки; у столбца, по
   которому сортируем, стрелка направления. Карточка договора
   раскрывается строкой под ним, как у сотрудников вне штата.
   ============================================================ */
.contracts-table .contracts-th {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.contracts-table .contracts-th:hover { background: var(--row-hover, #f2f6fb); }
.contracts-table .contracts-th.is-sorted { color: var(--bg-ink, #0B4F5E); }
/* Стрелка сортировки берёт размер заголовка: мельче 14px в программе не
   бывает (её правило про единый кегль). */
.contracts-sort-mark { opacity: 0.75; }
.contracts-table .contract-row { cursor: pointer; }
.contracts-table .contract-row.open td { background: #eef4fb; }
.contracts-table .contract-card-row > td { background: #fff; padding: 0 6px 10px; }

/* ============================================================
   КНОПКА «📐 ПРАВИЛА РАЗНЕСЕНИЯ» - ЗАМЕТНАЯ И СЛЕВА (правка 192, её
   правка 11.09.2026: «ею нужно будет пользоваться постоянно»; выбор -
   вариант C, положение слева). Стоит сразу после заголовка окна:
   заголовок остаётся первым, кнопка рядом, крестик - справа.
   ============================================================ */
#allocateRulesBtn {
    background: #fff !important;
    color: var(--bg-ink, #0B4F5E) !important;
    border: 2px solid #137A8C !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 7px 15px !important;
    margin-left: 18px !important;
    margin-right: auto !important;
}
#allocateRulesBtn:hover:not(:disabled) {
    background: #137A8C !important;
    color: #fff !important;
}
/* Порядок в шапке: заголовок → кнопка → крестик. Без него кнопка с
   margin-right:auto встала бы перед заголовком. */
/* «Разнести платежи» - вкладка Банка (17.10.2026): кнопка правил над таблицей справа. */
.bank-allocate-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }

/* ============================================================
   «📤 ЗАГРУЗИТЬ ПК»: СПИСОК ПОД КНОПКОЙ И ОКНО ПЕРЕД ЗАГРУЗКОЙ
   (правка 199, её «да» 14.09.2026 по образцу obrazec_zagruzka_pk.png).
   Два выбора раскрываются списком ПОД кнопкой, а не в строке: в строке
   второй выбор уезжал за правый край панели и его не было видно.
   ============================================================ */
#calImportMenu { position: relative; }
#calImportChoices {
    position: absolute;
    /* К правому краю кнопки: кнопка стоит в конце ряда, и список,
       растущий вправо, уходил бы за край окна. */
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    flex-direction: column;
    background: #fff;
    border: 1px solid #cfe0e6;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 90, 110, 0.22);
    padding: 8px;
    min-width: 290px;
}
#calImportChoices .btn { justify-content: flex-start; text-align: left; white-space: nowrap; }

/* Окно «что будет загружено»: два выбора, безопасный отмечен и в
   бирюзовой рамке, опасный - красным и ниже. */
.cal-import-box { width: 560px; max-width: 94vw; }
.cal-import-summary { background: #eaf6f9; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; line-height: 1.5; }
.cal-import-choice {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; cursor: pointer;
    border: 2px solid #cfe0e6; background: #fff;
}
.cal-import-choice input { margin-top: 3px; }
.cal-import-choice.is-safe.is-on { border-color: #137A8C; background: #f2fafc; }
.cal-import-choice.is-danger { border-color: #f0c9c5; background: #fff5f4; }
.cal-import-choice.is-danger.is-on { border-color: #b3261e; background: #ffecea; }
.cal-import-choice .cal-import-note { color: #425264; font-size: 14px; }
.cal-import-choice.is-danger .cal-import-note { color: #8a3a33; }

/* Крестик в карточке договора (правка 199, её правка 14.09.2026: «пусть
   крестик закрытия будет как везде с анимацией»). Вид и поворот берутся
   у .modal-close - класс тот же, здесь только место в углу карточки. */
.contracts-table .contract-card-close {
    float: right;
    margin: 2px 4px 0 10px;
    line-height: 1;
}

/* ============================================================
   ПРАВИЛО НОМЕРА ПИСЬМА (правка 201, её выбор варианта C из образца
   obrazec_nomer_pisma.png + «вмести по ширине страницы побольше -
   заполни полностью, а что не влезет, в открывающемся списке»).
   Сверху данные, ниже сетка настоящих номеров во всю ширину: сколько
   влезет в ряд, столько и встанет (auto-fill), остальные - под ссылкой.
   ============================================================ */
.letter-rule-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    margin-bottom: 10px;
    font-size: 14px;
}
.letter-rule-fields input[type="text"],
.letter-rule-fields input[type="number"] { padding: 6px; font-size: 15px; width: 120px; }
.letter-rule-fields .letter-rule-year { display: flex; align-items: center; gap: 7px; }
.letter-rule-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 14px;
    margin-bottom: 8px;
}
.letter-rule-pieces label { display: flex; align-items: center; gap: 5px; }
/* Ряд заполняется целиком: ширина колонки не меньше 160px, а сколько их
   поместится - решает окно. На узком экране станет две, на широком - шесть. */
.letter-rule-orders {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 14px;
}
.letter-order {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid #dfe6ec;
    border-radius: 7px;
    background: #fff;
    font-family: monospace;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.letter-order:hover { border-color: #9ccfdb; }
.letter-order.is-chosen {
    border-color: #137A8C;
    background: #eaf6f9;
    font-weight: 600;
}
.letter-rule-more { margin-top: 6px; font-size: 14px; }

/* ============================================================
   ПОДСВЕТКА СТРОКИ ПОД МЫШЬЮ В ПЛАТЁЖНОМ КАЛЕНДАРЕ (правка 209, её
   правка 14.09.2026: «если я ставлю мышку на строку, добавь выделение
   всей строки цветом - это нужно, чтобы удалить платёж: когда
   прокручиваешь вправо, уже не видно, что именно ты удаляешь»).

   Красим ЯЧЕЙКИ, а не строку: у строки свой цвет (чётные, оплаченные,
   просроченные, только что добавленные), и он рисуется поверх фона
   строки - подсветку было не видно. !important здесь по той же
   причине: она обязана перебить и зебру, и цвет «оплачено».

   Поля ввода внутри ячейки делаем прозрачными, иначе белые прямоугольники
   закрывают почти всю строку и подсветка видна только по краям.
   ============================================================ */
/* Заливка отменена правкой 287 - строку обводит рамка (конец файла). */
#tableTab .payment-table tbody tr:hover > td input:not([type="checkbox"]),
#tableTab .payment-table tbody tr:hover > td select,
#tableTab .payment-table tbody tr:hover > td textarea {
    background: transparent !important;
}
/* Поле, в котором человек сейчас печатает, остаётся белым - иначе не
   видно, куда идёт ввод. */
#tableTab .payment-table tbody tr:hover > td input:focus,
#tableTab .payment-table tbody tr:hover > td select:focus,
#tableTab .payment-table tbody tr:hover > td textarea:focus {
    background: var(--surface, #ffffff) !important;
}
/* Кнопка удаления в конце строки - на подсвеченной строке виднее. */
#tableTab .payment-table tbody tr:hover > td .btn-delete-row {
    box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.25);
}

/* Крестик «удалить свою картинку» в галерее фонов (правка 210). */
.bg-gallery-item { position: relative; }
.bg-custom-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(179, 38, 30, 0.85);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.bg-custom-remove:hover { background: #b3261e; }

/* ============================================================
   ЧИТАЕМОСТЬ ПЛАТЁЖНОГО КАЛЕНДАРЯ (правка 211, её выбор B2a из образца
   obrazec_kalendar_b2.png).
   Три вещи мешали читать: заливка строки, рамка у КАЖДОГО поля (их в
   строке пятнадцать) и одинаковый вес у оплаченного и неоплаченного.
   ============================================================ */
#tableTab .payment-table tbody td input,
#tableTab .payment-table tbody td select,
#tableTab .payment-table tbody td textarea {
    border-color: transparent !important;
    background: transparent !important;
}
/* Рамка появляется, только когда наводят или правят - тогда видно, что
   поле правится, а в покое строка читается как строка. */
#tableTab .payment-table tbody td input:hover,
#tableTab .payment-table tbody td select:hover,
#tableTab .payment-table tbody td textarea:hover,
#tableTab .payment-table tbody td input:focus,
#tableTab .payment-table tbody td select:focus,
#tableTab .payment-table tbody td textarea:focus {
    border-color: #9ccfdb !important;
    background: var(--surface, #ffffff) !important;
}
/* Строки разделены тонкой чёрной линией (правка 364, её выбор 23.09.2026 -
   вариант А образца obrazec_kalendar_perenos.html: 1 px). Линии между
   столбцами остаются светлыми. */
#tableTab .payment-table tbody tr > td { border-bottom: 1px solid #000; }
/* Просрочено - розовая строка и красная полоса слева. Плотность - её
   выбор 15.09.2026 по образцу obrazec_rozovyy_3_stroki.png (снимок с
   подписью «фон Р2»): прежний #fdeeee было почти не видно. */
#tableTab .payment-table tbody tr.overdue-row {
    background-color: #fbdcdc !important;
    border-left: 5px solid #c62828 !important;
}
/* Оплачено - мятная строка и тёмно-зелёная полоса. */
#tableTab .payment-table tbody tr.calendar-paid-row {
    background-color: #cfeede !important;
    border-left: 5px solid #17805a !important;
}
/* Оплачено ДРУГОЙ СУММОЙ - жёлтая строка и янтарная полоса (правка 341,
   её правка 21.09.2026: «если платёж прошёл с другой суммой, то
   подсвечивай жёлтым»). */
#tableTab .payment-table tbody tr.calendar-paid-diff-row {
    background-color: #fff1bf !important;
    border-left: 5px solid #d99a00 !important;
}
/* ТЕКСТ ВЕЗДЕ ЧЁРНЫЙ (её правка 15.09.2026: «текст не нужно делать серым
   нигде, пусть везде будет чёрным, и на зелёном тоже»). Приглушение
   оплаченных строк из правки 211 отменено; заодно снимаем серый с полей
   и выпадающих списков - в них браузер красит текст по-своему. */
#tableTab .payment-table tbody tr > td,
#tableTab .payment-table tbody tr > td input,
#tableTab .payment-table tbody tr > td select,
#tableTab .payment-table tbody tr > td textarea {
    color: #17212f !important;
}
/* Подсказка в пустом поле остаётся бледной - иначе её не отличить от
   заполненного значения. */
#tableTab .payment-table tbody tr > td input::placeholder,
#tableTab .payment-table tbody tr > td textarea::placeholder {
    color: #8c98a8 !important;
}

/* ТЕКСТ ПЕРЕНОСИТСЯ ДО ТРЁХ СТРОК, БЕЗ ПРОКРУТКИ (её правка 16.09.2026,
   заменяет правку 15.09 «назначение - поле ровно в три строки»).
   В покое в ячейке - текст .cal-wrap-view (calendar.js, calWrapTextCells):
   назначение, контрагент, статья и комментарий переносятся по словам,
   строка таблицы растёт по самой длинной ячейке, но не выше трёх строк;
   остальное обрезано многоточием, целиком - при наведении. Щелчок - то
   же поле ввода, что было. */
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    min-height: 30px;
    max-height: calc(3 * 1.25em + 6px);
    padding: 3px 7px;
    box-sizing: border-box;
    line-height: 1.25;
    font-size: 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    cursor: text;
    color: #17212f;
    /* одна строка текста - по центру высоты поля, как у соседних полей */
    align-content: center;
}
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.is-empty { color: #8c98a8; }
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view:hover { border-color: #9ccfdb; }
/* Поле, вместо которого показан текст, - по классу: с правки 364 оно может
   лежать не прямо в ячейке (сумма со «≈», список договора/счёта). */
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-field { display: none; }
#tableTab .payment-table tbody td.cal-wrap-cell.cal-wrap-editing .cal-wrap-view { display: none; }
#tableTab .payment-table tbody td.cal-wrap-cell.cal-wrap-editing .cal-wrap-field { display: block; }
/* Сумма - одной строкой: на две строки её не рвём (правка 364). */
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.cal-wrap-nowrap,
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.cal-wrap-nowrap > span.cal-wrap-text {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
/* Очень длинная сумма в узком столбце - многоточие, целиком при наведении. */
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.cal-wrap-nowrap > span.cal-wrap-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Заблокированные сумма и дата (из «Лизинга», «Страховок», «Проектов») -
   серый фон и рука, как было у самого поля: щелчок открывает источник. */
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.cal-wrap-locked {
    background: #f4f6f7;
    cursor: pointer;
}
/* Текст внутри обёрток: у суммы со «≈» - остаток строки, в ячейке
   договора/счёта - первая колонка сетки вместо списка. */
#tableTab .payment-table tbody td .cal-amount-wrap > .cal-wrap-view { flex: 1 1 auto; min-width: 0; }
#tableTab .payment-table tbody td .calendar-doc-cell > .cal-wrap-view { min-width: 0; }
/* Назначение во время правки - целиком, без прокрутки (высота по тексту). */
#tableTab .payment-table tbody td .cal-purpose {
    width: 100%;
    min-height: 30px;
    line-height: 1.25;
    padding: 3px 7px;
    resize: none;
    overflow: hidden;
    font-family: inherit;
    font-size: 15px;
}

/* ============================================================
   ЧИТАЕМОСТЬ ДОГОВОРОВ ЛИЗИНГА (правка 211, её выбор - вариант A БЕЗ
   рамок даже при наведении: «поля не нужны рамки даже при наведении»).
   ============================================================ */
#lzContractsBody .data-table td input,
#lzContractsBody .data-table td select {
    border-color: transparent !important;
    background: transparent !important;
}
/* Рамки нет и при наведении - только когда в поле печатают: иначе не
   видно, куда идёт ввод. */
#lzContractsBody .data-table td input:focus,
#lzContractsBody .data-table td select:focus {
    border-color: #9ccfdb !important;
    background: var(--surface, #ffffff) !important;
}
#lzContractsBody .data-table td { padding-top: 5px; padding-bottom: 5px; }
/* Посчитанное программой - подписью под полем, мельче и спокойнее. */
.lz-paid-note {
    font-size: 14px;
    color: var(--bg-ink, #0B4F5E);
    white-space: nowrap;
}

/* ДОСРОЧНО ПОГАШЕННАЯ СТРОКА ГРАФИКА (правка 284, её выбор: строки не
   удалять, а помечать - «исходные суммы на месте, ошиблись - сняли
   галочку и всё вернулось»). Строка гасится цветом и зачёркивается,
   но остаётся читаемой и правимой: это по-прежнему её график. */
.leasing-schedule-table tr.lz-early-paid > td {
    background: #f2f4f6 !important;
    opacity: 0.75;
}
.leasing-schedule-table tr.lz-early-paid input[type="number"] {
    text-decoration: line-through;
    color: #7c8899;
}
.lz-early-note {
    font-size: 14px;
    color: #1f7a5a;
    white-space: nowrap;
}

/* ПЕРЕКЛЮЧАТЕЛЬ «НАПОМИНАЛКА» ВЕРНУЛСЯ В ПАНЕЛЬ (правка 283, её правка
   18.09.2026: «напоминалку сверху рядом с задачником перенеси в панель
   сразу за поставить задачу»). Правкой 230 он стоял в шапке окна -
   правила порядка в шапке больше не нужны и убраны.

   Рядом с ним - счётчик напоминалок, ждущих своего дня: плашка под
   доской убрана совсем, открываются они этой же кнопкой. Вид у кнопки
   как у остальных белых кнопок панели, только пониже и с жёлтой
   каймой - чтобы счётчик было видно, но панель не пестрила. */
.tasks-toolbar .tasks-future-chip {
    height: 40px;
    padding: 0 14px;
    font-size: 15px;
    white-space: nowrap;
    border: 1px solid #e6c235 !important;
}
#tasksFutureChip:empty { display: none; }

/* Строка «Моих контактов» открывается щелчком (правка 230): курсор и
   подсветка под мышью - чтобы это было видно. */
#phonesTable tbody tr.phones-row { cursor: pointer; }
/* Цвет - общий неброский (правка 296, её «выделение должно быть
   неброским»), а не прежний заметный #BFE6F0. */
#phonesTable tbody tr.phones-row:hover > td { background: var(--row-hover-soft, #eaf7f9); }


/* ============================================================
   ПЛАТЁЖНЫЙ КАЛЕНДАРЬ КАК ЛИСТ EXCEL (её просьба 16.09.2026: «пусть поля
   будут размером со всю ячейку, а не меньше, как при нажатии в Excel;
   и добавь возможность протянуть список»).
   Поле занимает ячейку целиком, ячейки разделены тонкой сеткой,
   выбранная ячейка обведена рамкой, в её правом нижнем углу -
   квадратик протягивания (calendar.js, calFillSelect / calFillDrag).
   Цвет рамки и квадратика - #137A8C, тот же, что у выбранного варианта
   в окнах загрузки.
   ============================================================ */
#tableTab .payment-table tbody tr > td {
    padding: 0 !important;
    height: 1px;               /* даёт детям height:100% в ячейке таблицы */
    position: relative;
    border-right: 1px solid #e6edf3;
}
#tableTab .payment-table tbody td > input:not([type="checkbox"]),
#tableTab .payment-table tbody td > select,
#tableTab .payment-table tbody td > textarea,
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view {
    width: 100%;
    height: 100%;
    min-height: 32px;
    border-radius: 0 !important;
    border: 0 !important;
    margin: 0;
    box-sizing: border-box;
}
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view {
    max-height: none;
    display: flex;
    align-items: center;
}
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view > span.cal-wrap-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
#tableTab .payment-table tbody td.cal-cell-active {
    box-shadow: inset 0 0 0 2px #137A8C;
    z-index: 1;
}
#tableTab .payment-table tbody td.cal-cell-active > input:not([type="checkbox"]),
#tableTab .payment-table tbody td.cal-cell-active > select,
#tableTab .payment-table tbody td.cal-cell-active > textarea,
#tableTab .payment-table tbody td.cal-cell-active .cal-wrap-view {
    background: transparent !important;
}
.cal-fill-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: #137A8C;
    border: 1px solid #ffffff;
    cursor: crosshair;
    z-index: 2;
}
#tableTab .payment-table tbody td.cal-fill-target {
    box-shadow: inset 0 0 0 2px #137A8C;
    background: #e3f4f7 !important;
}
body.cal-filling, body.cal-filling * { cursor: crosshair !important; user-select: none; }

/* Ползунок ширины в шапке платёжного календаря (правка 241) - общий
   .col-resizer; шапка здесь выше, поэтому полоска во всю её высоту. */
#paymentTable thead tr:first-child th { position: sticky; }
/* Внутри своей ячейки (right: 0): соседний заголовок тоже «липкий» и
   рисуется поверх, полоска за краем не ловила мышь. */
#paymentTable thead tr:first-child th .col-resizer { top: 0; bottom: 0; right: 0; width: 8px; }

/* ============================================================
   ВЫДЕЛЕНИЕ СТРОКИ, КАК В 1С (правка 243; образец
   obrazec_granicy_shapki.png, её выбор «Б - светлая бирюза» #B9E2EA из
   согласованной палитры фона, «во всех таблицах»). Класс ставит
   rowselect.js. Выделение сильнее зебры, «оплачено/просрочено» и
   подсветки под мышью; поля внутри строки прозрачные, иначе белые
   прямоугольники закрывают цвет. Выбранная ячейка календаря (рамка)
   остаётся видна поверх.
   ============================================================ */
/* Z-15 (её выбор 24.09.2026, вариант А: «бирюзовый тоже вроде слишком
   разноцветно»). Выделенная строка больше НЕ заливается: у неё остаётся
   свой цвет («оплачено», «просрочено», обычная), а выделение - рамка
   тёмной бирюзой #0B6B82: 2px сверху и снизу, 3px по краям строки.
   Рисуется тенью внутрь ячейки (inset box-shadow), поэтому строка не
   прыгает и цветные полосы слева в календаре остаются на месте.
   Заливка #B9E2EA и прозрачные поля внутри выделенной строки убраны. */
table tbody tr.row-selected > td,
table tbody tr.row-selected:hover > td,
#tableTab .payment-table tbody tr.row-selected > td,
#tableTab .payment-table tbody tr.row-selected:hover > td,
#lzContractsBody .data-table tbody tr.row-selected > td,
#lzContractsBody .data-table tbody tr.row-selected:hover > td {
    box-shadow: inset 0 2px 0 #0B6B82, inset 0 -2px 0 #0B6B82 !important;
}
table tbody tr.row-selected > td:first-child,
table tbody tr.row-selected:hover > td:first-child,
#tableTab .payment-table tbody tr.row-selected > td:first-child,
#tableTab .payment-table tbody tr.row-selected:hover > td:first-child,
#lzContractsBody .data-table tbody tr.row-selected > td:first-child,
#lzContractsBody .data-table tbody tr.row-selected:hover > td:first-child {
    box-shadow: inset 0 2px 0 #0B6B82, inset 0 -2px 0 #0B6B82, inset 3px 0 0 #0B6B82 !important;
}
table tbody tr.row-selected > td:last-child,
table tbody tr.row-selected:hover > td:last-child,
#tableTab .payment-table tbody tr.row-selected > td:last-child,
#tableTab .payment-table tbody tr.row-selected:hover > td:last-child,
#lzContractsBody .data-table tbody tr.row-selected > td:last-child,
#lzContractsBody .data-table tbody tr.row-selected:hover > td:last-child {
    box-shadow: inset 0 2px 0 #0B6B82, inset 0 -2px 0 #0B6B82, inset -3px 0 0 #0B6B82 !important;
}
/* Строка из одной ячейки - рамка со всех сторон. */
table tbody tr.row-selected > td:first-child:last-child {
    box-shadow: inset 0 0 0 2px #0B6B82 !important;
}
/* Списки из строк (.list-item) - та же рамка вокруг строки. */
.list-item.row-selected,
.list-item.row-selected:hover {
    box-shadow: inset 0 0 0 2px #0B6B82 !important;
}

/* ГРАНИЦЫ СТОЛБЦОВ В ШАПКЕ ПЛАТЁЖНОГО КАЛЕНДАРЯ (правка 242; образец
   obrazec_granicy_shapki.png, её выбор «вариант 2 - линия во всю
   высоту»): видно, где тянуть ширину (правка 241). При наведении на
   заголовок линия толще и бирюзовая #137A8C - как рамка выбранной ячейки. */
#paymentTable thead tr:first-child th:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: #8FB9C4;
    pointer-events: none;
}
/* Цвет - через переменную: это граница столбца, а не подсветка строки
   (test_theme.js ищет «своих» цветов подсветки строк по :hover). */
#paymentTable thead { --cal-col-line-hover: #137A8C; }
#paymentTable thead tr:first-child th:not(:last-child):hover::after {
    background: var(--cal-col-line-hover);
    width: 3px;
}

/* СКРЫТЫЕ СТОЛБЦЫ КАЛЕНДАРЯ (правка 244): метка на месте скрытых - как
   двойная черта в Excel, бирюзовая (#137A8C, цвет рамки выбранной
   ячейки); щелчок по ней показывает столбцы. */
.cal-hidden-mark {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 7px;
    border-left: 2px solid #137A8C;
    border-right: 2px solid #137A8C;
    cursor: pointer;
    z-index: 7;
}
.cal-hidden-mark-right { right: 9px; }
.cal-hidden-mark-left { left: 1px; }
.cal-hidden-mark:hover { background: #B9E2EA; }
.cal-column-menu { z-index: 3000; min-width: 220px; }

/* ============================================================
   ТАБЛИЦА КАК ЛИСТ EXCEL - ОБЩИЙ ВИД .sheet-table (правка 246; первая
   таблица - «🚗 Авто штрафы», её «формат как в платёжном календаре»).
   Повторяет оформление календаря (правки 237-244): поле во всю ячейку,
   тонкая сетка, текст до 3 строк, рамка выбранной ячейки #137A8C,
   квадратик протягивания, линии между заголовками, метка скрытых
   столбцов. Логика - sheettable.js.
   ============================================================ */
.sheet-table tbody tr > td {
    padding: 0 !important;
    height: 1px;
    position: relative;
    border-right: 1px solid #e6edf3;
    border-bottom: 1px solid #e6edf3;
    vertical-align: middle;
}
.sheet-table tbody td > input:not([type="checkbox"]),
.sheet-table tbody td > select,
.sheet-table tbody td > textarea,
.sheet-table tbody td.sheet-wrap-cell > .sheet-wrap-view {
    width: 100%;
    height: 100%;
    min-height: 32px;
    border-radius: 0 !important;
    border: 0 !important;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
    font-size: 15px;
    color: #17212f;
}
.sheet-table tbody td.sheet-wrap-cell > .sheet-wrap-view {
    display: flex;
    align-items: center;
    padding: 3px 7px;
    line-height: 1.25;
    cursor: text;
    white-space: normal;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.sheet-table tbody td.sheet-wrap-cell > .sheet-wrap-view > span.sheet-wrap-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.sheet-table tbody td.sheet-wrap-cell > .sheet-wrap-view.is-empty { color: #8c98a8; }
.sheet-table tbody td.sheet-wrap-cell > input,
.sheet-table tbody td.sheet-wrap-cell > textarea { display: none; }
.sheet-table tbody td.sheet-wrap-cell.sheet-wrap-editing > .sheet-wrap-view { display: none; }
.sheet-table tbody td.sheet-wrap-cell.sheet-wrap-editing > input,
.sheet-table tbody td.sheet-wrap-cell.sheet-wrap-editing > textarea { display: block; background: #ffffff; }
.sheet-table tbody td.sheet-cell-active {
    box-shadow: inset 0 0 0 2px #137A8C;
    z-index: 1;
}
.sheet-fill-handle {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: #137A8C;
    border: 1px solid #ffffff;
    cursor: crosshair;
    z-index: 2;
}
.sheet-table tbody td.sheet-fill-target {
    box-shadow: inset 0 0 0 2px #137A8C;
    background: #e3f4f7 !important;
}
body.sheet-filling, body.sheet-filling * { cursor: crosshair !important; user-select: none; }
/* Линии между заголовками - во всю высоту (её выбор для календаря, правка
   242); у .data-table были короткие черточки - здесь они заменены. */
.sheet-table thead { --sheet-col-line-hover: #137A8C; }
.sheet-table thead th:not(:last-child)::after {
    top: 0;
    bottom: 0;
    width: 1px;
    border-radius: 0;
    background: #8FB9C4;
}
.sheet-table thead th:not(:last-child):hover::after {
    background: var(--sheet-col-line-hover);
    width: 3px;
}
.sheet-table thead th .col-resizer { top: 0; bottom: 0; right: 0; width: 8px; }
.sheet-hidden-mark {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 7px;
    border-left: 2px solid #137A8C;
    border-right: 2px solid #137A8C;
    cursor: pointer;
    z-index: 7;
}
.sheet-hidden-mark-right { right: 9px; }
.sheet-hidden-mark-left { left: 1px; }
.sheet-hidden-mark:hover { background: #B9E2EA; }
.sheet-column-menu { z-index: 3000; min-width: 220px; }

/* «Мои задачи» в согласовании счетов - компактные строки (правка 251). */
.inv-task-table { margin-bottom: 4px; background: #fff; width: 100%; table-layout: fixed; }
.inv-task-table td { padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.inv-task-row { cursor: pointer; }
.inv-task-sum { color: #1d7240; font-weight: bold; }
/* Личный комментарий - последний столбец «Моих задач» (16.10.2026) */
.inv-task-table td.inv-task-note { padding: 3px 8px; overflow: visible; }
.inv-task-note-in { width: 100%; box-sizing: border-box; font-size: 14px; padding: 4px 7px; border: 1px dashed #dce7ea; border-radius: 6px; background: #faf7fd; color: #1c2833; }
.inv-task-note-in:focus { outline: none; border: 1px solid #0B6B82; background: #fff; }
/* Кнопки действия в строке - компактные, строка не растёт в высоту. */
.inv-task-actions { max-width: none !important; overflow: visible !important; text-overflow: clip !important; }
.inv-task-actions button { padding: 2px 8px !important; font-size: 14px !important; line-height: 1.5; margin: 0 2px; min-height: 0; height: auto; }
.inv-task-actions span { font-size: 14px; }

/* «Договоры»: пометка у платежа, который уже идёт из «Лизинга» (правка 252). */
.contract-from-leasing { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 10px;
    background: #E3F4F7; color: var(--bg-ink, #0B4F5E); font-size: 14px; white-space: nowrap; }

/* ============================================================
   ЭКСКУРСИЯ СО СТРЕЛКАМИ (tour.js, правка 262).
   Её правка: «подсвечивай стрелками, где искать эти кнопки, чтобы
   понял младший школьник».
   Затемнение собрано из четырёх прямоугольников вокруг кнопки, а не
   из одной полупрозрачной плёнки с дыркой: так подсвеченную кнопку
   ВИДНО и её можно нажать - плёнка перехватывала бы нажатие.
   ============================================================ */
#tourLayer { display: none; }
#tourLayer.on { display: block; }
#tourLayer .tour-shade {
    position: fixed;
    background: rgba(9, 32, 40, 0.62);
    z-index: 9000;
    pointer-events: none;
    transition: all 0.2s ease;
}
#tourLayer .tour-ring {
    position: fixed;
    border: 4px solid #FFC857;
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.35), 0 0 24px rgba(255, 200, 87, 0.75);
    z-index: 9002;
    pointer-events: none;
    animation: tourPulse 1.4s ease-in-out infinite;
    transition: all 0.2s ease;
}
@keyframes tourPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 200, 87, 0.30), 0 0 20px rgba(255, 200, 87, 0.65); }
    50%      { box-shadow: 0 0 0 10px rgba(255, 200, 87, 0.12), 0 0 34px rgba(255, 200, 87, 0.95); }
}
#tourLayer .tour-arrow {
    position: fixed;
    font-size: 46px;
    line-height: 52px;
    z-index: 9003;
    pointer-events: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
    animation: tourNudge 1s ease-in-out infinite;
}
@keyframes tourNudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-10px); }
}
#tourLayer .tour-tip {
    position: fixed;
    z-index: 9004;
    background: #ffffff;
    border: 2px solid #17899C;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 18px 44px rgba(9, 32, 40, 0.35);
}
#tourLayer .tour-step { font-size: 14px; color: #17899C; font-weight: bold; letter-spacing: 1px; }
#tourLayer .tour-title { font-size: 22px; font-weight: bold; color: #0E2B33; margin: 6px 0 8px; }
#tourLayer .tour-text { font-size: 16px; line-height: 1.5; color: #2F4854; }
#tourLayer .tour-hint {
    font-size: 15px; line-height: 1.45; color: #4A5D66;
    background: #EAF5F7; border-radius: 10px; padding: 10px 12px; margin-top: 10px;
}
#tourLayer .tour-dots { display: flex; gap: 6px; margin: 14px 0 12px; }
#tourLayer .tour-dot { width: 9px; height: 9px; border-radius: 50%; background: #D3E3E7; }
#tourLayer .tour-dot.on { background: #17899C; transform: scale(1.25); }
#tourLayer .tour-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#tourLayer .tour-btn { padding: 8px 14px; font-size: 15px; }

.tour-welcome {
    position: fixed; inset: 0; z-index: 9100;
    background: rgba(9, 32, 40, 0.55);
    display: flex; align-items: center; justify-content: center;
}
.tour-welcome-card {
    background: #ffffff; border-radius: 22px; padding: 34px 38px; max-width: 560px;
    text-align: center; box-shadow: 0 22px 60px rgba(9, 32, 40, 0.4);
}
.tour-welcome-emoji { font-size: 58px; line-height: 1; }
.tour-welcome-card h2 { margin: 12px 0 10px; font-size: 28px; color: #0E2B33; }
.tour-welcome-card p { margin: 0 0 20px; font-size: 17px; line-height: 1.55; color: #3E5560; }
.tour-welcome-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.tour-btn-big { padding: 14px 26px; font-size: 18px; }
.tour-welcome-note { margin-top: 16px; font-size: 14px; color: #7C949E; }
/* Окно первого входа - что будет в знакомстве (её выбор 04.10.2026, вариант А). */
.tour-welcome-list { text-align: left; max-width: 460px; margin: 0 auto 20px; padding-left: 22px;
    font-size: 16px; line-height: 1.55; color: #3E5560; }
.tour-welcome-list li { margin: 4px 0; }
.tour-resume {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 9100; background: #ffffff; border: 2px solid #17899C; border-radius: 16px;
    padding: 12px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    box-shadow: 0 16px 40px rgba(9, 32, 40, 0.32); font-size: 16px; color: #0E2B33;
}

/* ---- Два режима в приветствии демо и обучающий курс (правка 263) ---- */
.tour-welcome-wide { max-width: 760px; }
.tour-mode {
    flex: 1; min-width: 260px; text-align: left; cursor: pointer;
    background: #F4F8F9; border: 2px solid #D3E4E8; border-radius: 16px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 8px; font-family: inherit;
}
.tour-mode:hover { border-color: #17899C; background: #EAF5F7; }
.tour-mode b { font-size: 20px; color: #0E2B33; }
.tour-mode span { font-size: 15px; line-height: 1.45; color: #3E5560; }

.lesson-overlay {
    position: fixed; inset: 0; z-index: 9200; background: rgba(9, 32, 40, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto;
}
.lesson-card {
    background: #ffffff; border-radius: 22px; padding: 30px 34px; max-width: 700px; width: 100%;
    box-shadow: 0 22px 60px rgba(9, 32, 40, 0.4); text-align: center;
}
.lesson-emoji { font-size: 52px; line-height: 1; }
.lesson-card h2 { margin: 10px 0 8px; font-size: 26px; color: #0E2B33; }
.lesson-sub { font-size: 16px; line-height: 1.55; color: #3E5560; margin: 0 0 14px; }
.lesson-note { margin-top: 14px; font-size: 14px; color: #7C949E; }
.lesson-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.lesson-list { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lesson-row {
    display: flex; align-items: center; gap: 14px; cursor: pointer; font-family: inherit;
    background: #F4F8F9; border: 2px solid #D3E4E8; border-radius: 14px; padding: 14px 16px; width: 100%;
}
.lesson-row:hover { border-color: #17899C; background: #EAF5F7; }
.lesson-row.done { background: #EDF7EF; border-color: #BFE0C6; }
.lesson-row-mark {
    flex: none; width: 34px; height: 34px; border-radius: 50%; background: #17899C; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: bold;
}
.lesson-row.done .lesson-row-mark { background: transparent; font-size: 24px; }
.lesson-row-text { display: flex; flex-direction: column; gap: 3px; }
.lesson-row-text b { font-size: 17px; color: #0E2B33; }
.lesson-row-about { font-size: 14px; line-height: 1.4; color: #4A5D66; }
.lesson-row-score { margin-left: auto; font-size: 14px; color: #2E7D5B; white-space: nowrap; }

.lesson-quiz-head { font-size: 14px; font-weight: bold; letter-spacing: 1px; color: #17899C; }
.lesson-question { margin: 10px 0 18px; font-size: 24px; line-height: 1.35; color: #0E2B33; }
.lesson-answers { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.lesson-answer {
    cursor: pointer; font-family: inherit; font-size: 17px; line-height: 1.4; color: #0E2B33;
    background: #F4F8F9; border: 2px solid #D3E4E8; border-radius: 14px; padding: 14px 18px; width: 100%;
    text-align: left;
}
.lesson-answer:hover { border-color: #17899C; background: #EAF5F7; }
.lesson-answer.right { background: #E6F6EA; border-color: #59B37A; }
.lesson-answer.wrong { background: #FDECEA; border-color: #D9736A; }
.lesson-answer[disabled] { cursor: default; }
.lesson-verdict {
    margin-top: 16px; font-size: 16px; line-height: 1.5; border-radius: 14px; padding: 14px 16px; text-align: left;
}
.lesson-verdict.ok { background: #E6F6EA; color: #1F6B41; }
.lesson-verdict.no { background: #FDECEA; color: #8C332B; }

/* ФАЙЛЫ ДОГОВОРА ЛИЗИНГА (правка 291). Строка с кнопкой и чипами
   файлов над графиком: файл прикладывается к договору один раз и
   дальше сам попадает в каждый ежемесячный счёт. */
.lz-files {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.lz-file-add {
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.lz-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ffffff;
    border: 1px solid #cfe0ea;
    border-radius: 8px;
    padding: 2px 6px 2px 10px;
    font-size: 14px;
    max-width: 320px;
}
.lz-file-chip a {
    color: var(--bg-ink, #0B4F5E);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lz-file-chip a:hover { text-decoration: underline; }


/* ВКЛАДКУ ТАЩАТ МЫШЬЮ (правка 302): видно, какую именно. */
.tab-btn.tab-dragging { opacity: 0.45; }

/* ИЗМЕНИЛОСЬ У ДРУГОГО - ПОДСВЕТКА НА 3 СЕКУНДЫ (правка 313, её выбор
   «б» по образцу 19.09.2026: светло-жёлтая заливка, которая гаснет).
   Последнего кадра нет намеренно: заливка гаснет в СОБСТВЕННЫЙ цвет
   карточки или строки, а не в прозрачный. */
@keyframes liveFlash { 0% { background-color: #fff4c2; } 70% { background-color: #fff4c2; } }
.live-flash, tr.live-flash > td { animation: liveFlash 3s ease-out; }
.live-changed-note { background: #fff4c2; padding: 8px 10px; margin-bottom: 10px; font-size: 14px; }

/* ============================================================
   СУММА МЕНЯЕТСЯ (правка 349, её выбор 23.09.2026 по образцу).
   Календарь: тихий серый «≈» перед суммой - свойство платежа, не тревога.
   Заявка: пометка только на стадии «Новая заявка» - красная, если сумма
   осталась прошлого месяца, серая строчка-справка, если её поправили.
   ============================================================ */
.payment-table td .cal-amount-varies { color: #97a1b0; font-weight: 700; margin-right: 2px; cursor: help; }
.payment-table td .cal-amount-wrap { display: flex; align-items: center; gap: 2px; }
.payment-table td .cal-amount-wrap > input { flex: 1 1 auto; min-width: 0; width: auto; }
.inv-varies-mark { color: #d1493c; font-weight: 700; margin-right: 3px; }
.inv-varies-sum { border-bottom: 2px dashed #d1493c; }
.inv-varies-hint { font-size: 14px; color: #7c8899; margin-top: 3px; }
.inv-varies-strip { background: #fff6f5; border-left: 3px solid #d1493c; border-radius: 4px; padding: 3px 7px;
    margin-top: 6px; font-size: 14px; color: #7a2f26; }
input.inv-varies-input { border: 1.5px dashed #d1493c !important; background: #fff8f7 !important; }
.inv-varies-warn { background: #fff6f5; border-left: 3px solid #d1493c; border-radius: 4px; padding: 6px 9px;
    margin-top: 6px; font-size: 14px; color: #7a2f26; line-height: 1.5; }

/* ============================================================
   ПРОГРАММА ОБНОВИЛАСЬ (правка 351, static/js/autoupdate.js): тонкая
   спокойная плашка сверху, пока страница ждёт безопасного момента.
   ============================================================ */
.autoupdate-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 100000;
    display: flex; gap: 12px; align-items: center; background: #eef6fb; color: #1a2538;
    border: 1px solid #b9d8ea; border-top: none; border-radius: 0 0 10px 10px; padding: 6px 14px;
    font-size: 14px; box-shadow: 0 2px 8px rgba(20, 40, 70, .12); max-width: 92vw; }

/* ============================================================
   АКТ СВЕРКИ: САЛЬДО ОДНИМ ВЫВОДОМ И «ЗАКРЫВАЮТ НАЧАЛЬНОЕ САЛЬДО?»
   (правка 352, её выбор 23.09.2026 по образцу obrazec_akt_saldo.html).
   ============================================================ */
.acts-saldo { line-height: 1.6; margin-bottom: 10px; }
.acts-saldo-ok { background: #f2faf5 !important; border-color: #bfe3cc !important; }
.acts-saldo-bad { background: #fff5f3 !important; border-color: #f3c8c2 !important; }
/* Чья половина акта (acts_storona.js): итог словами не совпал - красным; переключатель - светлые кнопки. */
.acts-storona-ne, .acts-storona-ne .k { color: #c0392b; font-weight: 600; }
.acts-storona-btn { padding: 2px 12px; font-size: 14px; }
.acts-storona-btn.active { background: #E0F2F6; border-color: #0B6B82; color: #0B4F5E; font-weight: 600; }
.acts-saldo-plain { background: #f8fafc !important; border-color: #dfe6ec !important; }
.acts-saldo-verdict { display: block; font-size: 15px; margin-bottom: 4px; }
.acts-saldo-row { display: flex; gap: 10px; font-size: 14px; }
.acts-saldo-row .k { min-width: 150px; color: #5b6678; flex-shrink: 0; }
.acts-saldo-closing { background: #fdf6e3; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; }
.acts-saldo-closing-title { font-weight: 600; margin-bottom: 4px; }
.acts-saldo-closing-row { padding: 2px 0; }
/* Переплата по принятым парам (правка 360, её выбор - вариант 1): части под
   строкой, тонкая черта слева, без заливки. */
/* Сальдо после каждой операции (правка 361, её выбор - вариант 1): сумма и
   мелкое серое «мы должны / нам должны»; столбец чуть отделён линией. */
.acts-compare-table td.acts-saldo-col, .acts-compare-table th.acts-saldo-col {
    text-align: right; white-space: nowrap; border-left: 1px solid #dfe6ec; }
.acts-saldo-w { color: #8a96a6; font-size: 14px; margin-left: 5px; }
/* Сумма не переносится по разрядам («467 / 593,00»). */
.acts-compare-table td.acts-money { white-space: nowrap; }
/* В парной таблице колонки узкие - слово под суммой, а не за краем. */
.acts-compare-table.acts-paired .acts-saldo-w { display: block; margin-left: 0; line-height: 1.2; }
.acts-compare-table tr.acts-start-row td { color: #5b6678; font-style: italic; background: #fff; }
/* ТИХИЙ ВИД ПРОВЕРКИ ОДНОГО АКТА (её образцы 25.10.2026, вариант А: «только
   две вещи бросаются в глаза - ✅ закрыто в ноль и красное»): у закрытых
   строк нет ни полоски, ни заливки; красная и жёлтая - заливка всей строки
   и текст статуса без значка. Шрифт статуса обычный, 14px. */
.acts-compare-table.acts-tiho tr.acts-row-green td:first-child { border-left: none; }
.acts-compare-table.acts-tiho tr.acts-row-green td.acts-money { color: #1f2d3a; font-weight: 500; }
.acts-compare-table.acts-tiho td.status-green { color: #27ae60; font-weight: 700; }
.acts-compare-table.acts-tiho td.status-red { color: #c0392b; font-weight: 600; font-size: 14px; padding: 4px 9px; }
.acts-compare-table.acts-tiho td.status-yellow { color: #8a6500; font-weight: 500; font-size: 14px; padding: 4px 9px; }
.acts-compare-table.acts-tiho tr.acts-row-near td:first-child { border-left: 4px solid #e9c66a; }
.acts-compare-table.acts-tiho tr.acts-row-near td { background: #fdf8e3; }
.acts-compare-table.acts-tiho tr.acts-row-red td { background: #fce4e4; }
.acts-compare-table.acts-tiho tr.acts-end-row td { border-top: 2px solid #d5e3e9; }
/* ОТВЕТ ОДНОЙ ФРАЗОЙ И ДЕЙСТВИЯ (вариант В, 26.10.2026): один блок над
   карточками, крупная первая строка, остальное - обычным шрифтом. */
.acts-fraza { border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background: #fff5f3; border: 1px solid #f3c8c2; }
.acts-fraza.acts-fraza-ok { background: #f2faf5; border-color: #bfe3cc; }
.acts-fraza.acts-batch { background: #f8fafc; border-color: #dfe6ec; }
.acts-fraza-glavnoe { font-size: 17px; font-weight: 700; color: #1f2d3a; }
.acts-fraza-chasti { font-size: 14px; color: #425264; margin-top: 3px; }
.acts-fraza-deystviya { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.acts-fraza-primech { font-size: 14px; color: #7c8899; margin-top: 6px; }
.acts-net-v-akte { margin-top: 8px; max-width: 900px; }
.acts-batch-table { margin-top: 8px; }
/* Пачка актов - тихо, как таблица одного акта: сошлось - белая строка и ✅,
   не сошлось - светло-красная строка и красный текст итога (без тёмной заливки). */
.acts-batch-table tr.acts-row-red td { background: #fdecec; }
.acts-batch-table td.akt-itog-ok { color: #1e7b4f; font-weight: 600; background: transparent; }
.acts-batch-table td.akt-itog-net { color: #c0392b; font-weight: 600; }
.acts-letter-box .acts-letter-tema { flex-basis: 100%; display: flex; gap: 8px; align-items: center; }
.acts-letter-box .acts-letter-tema input { flex: 1; min-width: 240px; }
.acts-letter-box .acts-letter-text { flex-basis: 100%; width: 100%; font: 14px/1.4 inherit; font-family: inherit; padding: 8px 10px;
    border: 1px solid #d5e3e9; border-radius: 6px; resize: vertical; }
/* ⓘ «чем закрыто» - серый кружок, подсказка при наведении. */
.acts-po-ocheredi { display: inline-block; color: #6b7a8c; font-size: 15px; font-weight: 400; margin-left: 6px; cursor: help; }
.acts-po-ocheredi:hover { color: #2f6f9f; }
.acts-near-toggle { color: #2f6f9f; cursor: pointer; white-space: nowrap; }
.acts-near-toggle:hover { text-decoration: underline; }
.acts-near-parts { margin: 4px 0 4px 160px; border-left: 2px solid #d5e3e9; padding-left: 10px; font-size: 14px; }
.acts-near-parts > div { padding: 1px 0; }
.acts-near-sum { font-weight: 600; border-top: 1px solid #e3e8ee; margin-top: 3px; padding-top: 3px; }
.acts-near-undo { color: #7c8899; cursor: pointer; margin-left: 6px; text-decoration: none; }
.acts-near-undo:hover { color: #2f6f9f; }

/* ============================================================
   ПОДСКАЗКИ ОКНА - ОДНОЙ ВКЛАДКОЙ (правка 353, её выбор 23.09.2026 по
   образцу obrazec_podskazki_vkladka.html; пока - «Организации»).
   ============================================================ */
.tabs > .tab-btn.hint-tab { margin-left: auto; background: #fffbea; border-color: #f0dcb8; color: #6b5520; }
.tabs > .tab-btn.hint-tab.open { background: #fff3c4; border-color: #e9b949; }
.hints-panel { background: #fff; border: 1px solid #f0dcb8; border-radius: 10px; margin: 0 0 8px; padding: 6px 12px 7px;
    font-size: 14px; line-height: 1.45; color: #1a2538; }
.hints-panel-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 3px; gap: 10px; flex-wrap: wrap; }
.hints-panel-actions { display: flex; gap: 12px; font-weight: 400; }
.hints-panel .hint-collapse { border: none; background: none; color: #2f6f9f; font-size: 14px; cursor: pointer; padding: 0; white-space: nowrap; }
.hints-panel-item { margin: 0 0 4px; }
.hints-panel-item .hint-head { display: none; }
body.ui-themed .tabs > .tab-btn.hint-tab { background: #fffbea; border-color: #f0dcb8; color: #6b5520; }
/* Окно без вкладок: кнопка в шапке, перед крестиком (правка 355). */
.modal-header > .hint-tab-head { margin-left: auto; margin-right: 12px; background: #fffbea; border: 1px solid #f0dcb8;
    color: #6b5520; border-radius: 8px; padding: 4px 10px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.modal-header > .hint-tab-head.open { background: #fff3c4; border-color: #e9b949; }
.modal-header > .hint-tab-head + .modal-close { margin-left: 0; }

/* СОТРУДНИК БЕЗ РОЛИ (правка 347): только отмеченные разделы. Поиск по
   сайту, «С чего начать», помощник и экскурсия открывают окна мимо панели -
   у него их нет (см. applyClientMode в permissions.js). */
body.perm-strict #globalSearchTrigger,
body.perm-strict #startHelp,
body.perm-strict #tutorialBox,
body.perm-strict #tourWelcome { display: none !important; }

/* Контрагент в карточке счёта - ссылка в справочник (правка 365). */
.inv-contractor-link { color: #2c3e50; text-decoration: underline; text-decoration-color: #9ccfdb; text-underline-offset: 3px; }
.inv-contractor-link:hover { color: #137A8C; text-decoration-color: #137A8C; }
/* Окно, открытое из другого окна, которое в разметке стоит позже, -
   поверх него (правка 365: «Организации» из карточки счёта). */
.modal.modal-poverh { z-index: 1001; }

/* Вкладка «📒 Начальные остатки контрагенты» (правка 367): кнопки «Загрузить
   из файла» вынесены в верхний ряд, дубли внутри блоков спрятаны. В окне
   «📈 Реализации» тот же блок покупателей показывает свою кнопку как раньше. */
#openingsTab .osv-upload-inline { display: none; }

/* Счёт по валютному договору лизинга (правка 369): сумма в валюте рядом с рублями. */
.inv-cur-sum { font-size: 14px; font-weight: 600; color: #a06010; white-space: nowrap; }
/* ============================================================
   Z-59. ЗАЯВКА В ВАЛЮТЕ (её выбор 29.09.2026, «2а»). Выбор валюты справа
   от поля «Сумма»; при валюте под полем - «в рублях [ ] по курсу ЦБ …».
   ============================================================ */
.inv-sum-row { display: flex; gap: 6px; align-items: center; }
.inv-cur-select { padding: 6px; border: 1px solid #cfe0e4; border-radius: 6px; background: #fff; min-width: 88px; }
.inv-cur-conv { font-size: 14px; color: #48636B; margin-top: 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.inv-cur-conv .inv-cur-rub { display: inline-flex; align-items: center; gap: 6px; }
.inv-cur-conv .inv-cur-rub input { width: 130px; padding: 4px 6px; border: 1px solid #cfe0e4; border-radius: 6px; font-weight: 600; color: #0B4F5E; }

/* ============================================================
   Z-01. ЗАДАЧНИК - ПОЛОСА КНОПОК ОДНИМ СТИЛЕМ (её выбор 23.09.2026,
   вариант 1 «белые кнопки с бирюзовой рамкой»). Все элементы полосы -
   кнопки, галочки, счётчик «Ждут дня», поиск, «Настройка канбана» и
   «Подсказки» в шапке окна - выглядят ОДИНАКОВО: 38px, белый фон,
   рамка #9FD3DD, углы 8px. Главной/цветной кнопки нет - по правке
   «они должны быть в одном стиле». Всё под #tasksModal: другие окна
   не задеты. Стоит ПЕРЕД блоком «СТРОКА ПОД МЫШЬЮ» (тот обязан быть последним) и перебивает прежние правила полосы
   (в т.ч. с !important выше по файлу). Плашки стадий НЕ трогаются.
   ============================================================ */
#tasksModal .tasks-toolbar {
    background: #fff !important;
    border: none !important;
    border-radius: 10px;
    padding: 10px 12px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
#tasksModal #tasksFutureChip { display: contents; }
#tasksModal .tasks-toolbar .btn,
#tasksModal .tasks-toolbar .tasks-toolbar-check,
#tasksModal .tasks-toolbar input[type="text"],
#tasksModal .modal-header .hint-tab-head {
    height: 38px !important;
    box-sizing: border-box;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 0 14px !important;
    margin: 0;
    background: #fff !important;
    color: #0B4F5E !important;
    border: 1.5px solid #9FD3DD !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1;
    white-space: nowrap;
    transform: none !important;
    cursor: pointer;
}
#tasksModal .modal-header .hint-tab-head {
    height: 34px !important; font-size: 14px !important;
    margin-left: auto; margin-right: 12px;   /* остаётся справа, у крестика */
}
/* подсказка открыта - как наведение, без прежней жёлтой заливки */
#tasksModal .modal-header .hint-tab-head.open {
    background: #F3FAFB !important; border-color: #3AA7BD !important;
}
#tasksModal .tasks-toolbar .btn:hover:not(:disabled),
#tasksModal .tasks-toolbar .tasks-toolbar-check:hover,
#tasksModal .modal-header .hint-tab-head:hover {
    background: #F3FAFB !important;
    border-color: #3AA7BD !important;
    color: #0B4F5E !important;
    transform: none !important;
    box-shadow: none !important;
}
/* поиск: такой же «кнопкой», лупа - картинкой в поле */
#tasksModal .tasks-toolbar input[type="text"] {
    width: 200px; min-width: 160px;   /* её правило: поле не шире нужного */
    font-weight: 400 !important;
    cursor: text;
    padding-left: 36px !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C9CA4' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 12px center !important;
    outline: none;
}
#tasksModal .tasks-toolbar input[type="text"]::placeholder { color: #7C9CA4; opacity: 1; }
#tasksModal .tasks-toolbar input[type="text"]:focus {
    border-color: #3AA7BD !important;
    background-color: #F3FAFB !important;
}
/* галочки: свой квадратик 16px, включённая - заливка #0B6B82 с белой птичкой */
#tasksModal .tasks-toolbar-check input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin: 0; flex: none;
    border: 1.6px solid #3AA7BD; border-radius: 4px;
    background: #fff; position: relative; cursor: pointer;
}
#tasksModal .tasks-toolbar-check input[type="checkbox"]:checked {
    background: #0B6B82; border-color: #0B6B82;
}
#tasksModal .tasks-toolbar-check input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* число в «Ждут дня» - кружок */
#tasksModal .tasks-chip-num {
    min-width: 24px; height: 24px; padding: 0 7px;
    border-radius: 12px; background: #0B6B82; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}

/* ============================================================
   Z-02. ДОГОВОРЫ - ПОЛЯ ОТБОРА НАД СВОИМИ СТОЛБЦАМИ (её выбор
   23.09.2026, вариант 1: поле под названием столбца, как в «Моих
   контактах»). Вид полей - общий th .filter-input / th .filter-select.
   Здесь только два поля даты друг под другом в узком столбце.
   ============================================================ */
#contractsBody th input[type="date"].filter-input + input[type="date"].filter-input { margin-top: 3px; }
#contractsBody th .filter-input,
#contractsBody th .filter-select { cursor: auto; }

/* ============================================================
   Z-03. СОГЛАСОВАНИЕ СЧЕТОВ - «МОИ ЗАДАЧИ» СПОКОЙНЕЕ (её выбор
   23.09.2026: «плашки на треть светлее и изменённые да/нет -
   светлее»). Только экран «Мои задачи» (плашки там стоят в
   .stage-plate-wrap БЕЗ класса kanban-stage-header); доска-канбан и
   другие окна не задеты.
   1) Плашки стадий: цвет стадии тот же (он задаётся в разметке),
      поверх - белая дымка 35%. Форма, текст, счётчик - без изменений.
   2) Кнопки действий в строке (.inv-task-actions): светлая заливка,
      цвет смысла - у текста и рамки. Что делают - не меняется.
   ============================================================ */
#invoicesModal .stage-plate-wrap:not(.kanban-stage-header) .stage-plate {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35)) !important;
}
#invoicesModal .inv-task-actions button {
    padding: 3px 8px !important;   /* рамка добавила ширины - иначе «Оплачено» упирается в «Открыть →» */
    box-shadow: none !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
}
/* зелёные: «Да», «Отправить на согласование», «Оплачено» */
#invoicesModal .inv-task-actions .btn-decision-yes,
#invoicesModal .inv-task-actions .btn-composite-approve,
#invoicesModal .inv-task-actions .btn-success {
    background: #E4F3EA !important;
    color: #1F6B45 !important;
    border: 1.5px solid #9CCFB2 !important;
}
/* красная: «Нет» */
#invoicesModal .inv-task-actions .btn-decision-no {
    background: #FBE9E7 !important;
    color: #A3271F !important;
    border: 1.5px solid #E7AFA9 !important;
}
/* синяя: «Письмо сейчас» */
#invoicesModal .inv-task-actions .btn-primary {
    background: #E3EEF8 !important;
    color: #1F5A8C !important;
    border: 1.5px solid #A9C6E2 !important;
}
/* наведение - чуть темнее той же заливки */
#invoicesModal .inv-task-actions .btn-decision-yes:hover,
#invoicesModal .inv-task-actions .btn-composite-approve:hover,
#invoicesModal .inv-task-actions .btn-success:hover { background: #D2EBDC !important; }
#invoicesModal .inv-task-actions .btn-decision-no:hover { background: #F6D8D4 !important; }
#invoicesModal .inv-task-actions .btn-primary:hover { background: #D3E3F2 !important; }

/* ============================================================
   Z-04. ЛИЗИНГ → ДОГОВОРЫ: СПИСОК СЛЕВА, ДОГОВОР СПРАВА (её выбор
   23.09.2026, вариант 3). Разметку строит renderLeasingContracts
   (leasing.js). Цвета - утверждённая бирюзовая палитра.
   ============================================================ */
#lzContractsBody .lz-md { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; align-items: start; }
#lzContractsBody .lz-list-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#lzContractsBody .lz-list-search { height: 36px; border: 1.5px solid #9FD3DD; border-radius: 8px; padding: 0 12px; font-size: 14px; background: #fff; }
#lzContractsBody .lz-list-search:focus { outline: none; border-color: #3AA7BD; background: #F3FAFB; }
#lzContractsBody .lz-list-sort { font-size: 14px; color: #5b7480; display: flex; gap: 12px; align-items: center; white-space: nowrap; }
#lzContractsBody .lz-sort-btn { color: #0B4F5E; font-weight: 600; }
#lzContractsBody .lz-extras { font-size: 14px; color: #0B4F5E; display: flex; gap: 6px; align-items: center; }
#lzContractsBody .lz-extras input { width: auto; }
#lzContractsBody .lz-list { overflow-y: auto; padding-right: 2px; }
#lzContractsBody .lz-list-empty { font-size: 14px; color: #5b7480; padding: 10px; }
#lzContractsBody .lz-li { background: #fff; border: 1.5px solid #E3EEF1; border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; }
#lzContractsBody .lz-li:hover { border-color: #9FD3DD; background: #F7FBFC; }
#lzContractsBody .lz-li.on { border-color: #3AA7BD; background: #E6F5F8; }
/* Выплаченный договор - светло-зелёный, с кнопкой «📦 Убрать в архив» (её выбор «а» 07.10.2026). */
#lzContractsBody .lz-li.lz-vyplachen { background: #e6f4ec; border-color: #b9dfc8; }
#lzContractsBody .lz-li.lz-vyplachen.on { border-color: #1a8348; }
#lzContractsBody .lz-li-arh { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; color: #5b6b7c; flex-wrap: wrap; }
#lzContractsBody .lz-arh-btn { border: 1px solid #1a8348; color: #1a8348; background: #fff; border-radius: 8px; padding: 3px 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
#leasingModal .lz-arh-row { cursor: pointer; }
#lzContractsBody .lz-li-r { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#lzContractsBody .lz-li-name { font-weight: 700; color: #1a2e38; font-size: 15px; overflow-wrap: anywhere; }
#lzContractsBody .lz-li-sub { font-size: 14px; color: #6c8791; margin-top: 1px; }
#lzContractsBody .lz-li-money { margin-top: 6px; }
#lzContractsBody .lz-li-money b { white-space: nowrap; color: #1a2e38; }
#lzContractsBody .lz-prog { display: inline-block; flex: 1; max-width: 150px; height: 8px; background: #E3EEF1; border-radius: 4px; overflow: hidden; }
#lzContractsBody .lz-prog i { display: block; height: 100%; background: #3AA7BD; }
#lzContractsBody .lz-tag { display: inline-block; font-size: 14px; font-weight: 600; padding: 0 8px; border-radius: 10px; background: #EEF4F6; color: #40606b; }
#lzContractsBody .lz-tag-cur { background: #E3EEF8; color: #1F5A8C; }
#lzContractsBody .lz-pane { background: #fff; border-radius: 10px; padding: 14px 16px; min-width: 0; }
#lzContractsBody .lz-pane-empty { color: #5b7480; font-size: 15px; padding: 30px 10px; text-align: center; }
/* заголовок карточки не уезжает при прокрутке (её правка 300: «строка договора не должна закрываться») */
#lzContractsBody .lz-pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; background: #fff; padding: 4px 0; }
#lzContractsBody .lz-pane-title { font-weight: 800; font-size: 18px; color: #0B4F5E; }
#lzContractsBody .lz-pane-btn { padding: 4px 12px; font-size: 14px; }
#lzContractsBody .lz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
#lzContractsBody .lz-stat { background: #F3FAFB; border-radius: 8px; padding: 8px 10px; }
#lzContractsBody .lz-stat-l { font-size: 14px; color: #6c8791; }
#lzContractsBody .lz-stat-x { font-weight: 800; font-size: 17px; color: #1a2e38; }
#lzContractsBody .lz-pane-body { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
#lzContractsBody .lz-fields { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
#lzContractsBody .lz-f-label { font-size: 14px; color: #5b7480; }
#lzContractsBody .lz-f-ctrl input[type="text"],
#lzContractsBody .lz-f-ctrl input[type="number"],
#lzContractsBody .lz-f-ctrl input[type="date"],
#lzContractsBody .lz-f-ctrl select { width: 100%; height: 32px; border: 1.5px solid #CFE7EC; border-radius: 6px; padding: 0 8px; font-size: 14px; background: #fff; box-sizing: border-box; }
#lzContractsBody .lz-f-ctrl .lz-check { display: flex; gap: 6px; align-items: center; font-size: 14px; }
#lzContractsBody .lz-f-ctrl .lz-check input { width: auto; }
#lzContractsBody .lz-sched { min-width: 0; }
#lzContractsBody .lz-sched-title { font-weight: 800; font-size: 15px; color: #0B4F5E; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#lzContractsBody .lz-sched-table { table-layout: fixed; width: 100%; }
#lzContractsBody .lz-sched-table input { width: 100%; box-sizing: border-box; }
#lzContractsBody .lz-sched-table td, #lzContractsBody .lz-sched-table th { padding-left: 4px; padding-right: 4px; }
#lzContractsBody .lz-sched-table .lz-paid-note { white-space: normal; font-size: 14px; }
#lzContractsBody #lzScheduleScroll { overflow-y: auto; margin-top: 6px; background: #fff; }
#lzContractsBody .lz-chip { display: inline-block; font-size: 14px; padding: 1px 8px; border-radius: 10px; background: #EEF4F6; color: #40606b; white-space: nowrap; }
#lzContractsBody .lz-chip-paid { background: #E4F3EA; color: #1F6B45; }
#lzContractsBody .lz-chip-part { background: #FFF3D6; color: #7a5200; }
#lzContractsBody .lz-chip-early { background: #E3EEF8; color: #1F5A8C; }
/* «оплачено?» - будущая строка, которую расчёт принял за оплаченную, пока
   остаток не сошёлся с графиком (разбор 30.09.2026). Не зелёная, как
   настоящее «оплачено», и не красная: программа не знает, прошёл платёж
   или нет, и не делает вид, что знает. */
#lzContractsBody .lz-chip-doubt { background: #FFE9D6; color: #8a4b00; }
#lzContractsBody tr.lz-row-paid input { color: #8aa1a8; }
#lzContractsBody .lz-pane-foot { margin-top: 10px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   Z-05. СОГЛАСОВАНИЕ СЧЕТОВ - ПОИСК ВО ВСЮ ШАПКУ (её выбор
   23.09.2026: «поле поиска растяни на всё поле до названия
   страницы»). Поле занимает всё место между названием окна и
   кнопкой «💡 Подсказки»; на узком окне сужается, но не меньше
   200px. Высота и подпись прежние. Разметку не трогаем: ширина
   190px и margin-left:auto стоят в style у поля - перебиваем здесь.
   ============================================================ */
#invoicesModal .modal-header > .inv-search-wrap {
    flex: 1 1 auto;
    min-width: 200px;
    margin: 0 16px 0 24px;
    position: relative;
    display: flex;
}
#invoicesModal .inv-search-wrap > #invoicesSearchInput {
    width: 100%;
    height: 40px;
    margin: 0;
    padding-right: 44px;   /* место под ✕ - длинный запрос под него не уходит */
    box-sizing: border-box;
}
/* ✕ «Очистить поиск» - в правом краю поля (её выбор 12.10.2026, вариант А
   образца): серый крестик без рамки, виден только когда в поле что-то есть. */
#invoicesModal .inv-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #5a6f78;
    font-size: 16px;
    line-height: 30px;
    cursor: pointer;
}
#invoicesModal .inv-search-clear:hover { background: #E3F1F4; color: #0B4F5E; }
#invoicesModal .inv-search-clear[hidden] { display: none; }
/* «Подсказки» больше не нужно отжимать вправо - поле уже заняло место */
#invoicesModal .modal-header > .hint-tab-head { margin-left: 0 !important; }

/* ============================================================
   Z-06. «ДА / НЕТ» ВМЕСТО КВАДРАТОВ ✓ / ✕ - ВЕЗДЕ (её выбор 23.09.2026:
   «сделай вместо этих значков галочка и крестик такие да и нет, как
   на варианте выше, чтобы везде заменить»). Тот же светлый вид, что у
   кнопок в «Моих задачах» (Z-03): светлая заливка, цвет смысла - у
   текста и рамки, высота 28px, шрифт 14px. Прежние квадраты были
   34×34 с жирным значком 17px - крупнее всего в строке.
   Где: «Организации не совпадают», «Составные суммы», «Проверь
   вручную» (.decision-icons) и столбец «Решение» в таблице сверки
   (.decision-cell .row-action-icons), там же «✉ Письмо» и «↩ Отменить».
   ============================================================ */
.row-icon-btn.row-icon-accept,
.row-icon-btn.row-icon-reject,
.row-icon-btn.row-icon-email {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 28px !important;
    aspect-ratio: auto !important;
    padding: 3px 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3;
    border-radius: 6px !important;
    white-space: nowrap;
    box-sizing: border-box;
    text-decoration: none;
}
.row-icon-btn.row-icon-accept { background: #E4F3EA !important; color: #1F6B45 !important; border: 1.5px solid #9CCFB2 !important; }
.row-icon-btn.row-icon-reject { background: #FBE9E7 !important; color: #A3271F !important; border: 1.5px solid #E7AFA9 !important; }
.row-icon-btn.row-icon-email  { background: #E3EEF8 !important; color: #1F5A8C !important; border: 1.5px solid #A9C6E2 !important; }
/* «↩ Отменить» - не «нет», а возврат: нейтральный серо-бирюзовый */
.row-icon-btn.row-icon-reject.row-icon-undo { background: #EEF4F6 !important; color: #40606b !important; border-color: #C9D9DE !important; }
.row-icon-btn.row-icon-accept:hover { background: #D2EBDC !important; filter: none; }
.row-icon-btn.row-icon-reject:hover { background: #F6D8D4 !important; filter: none; }
.row-icon-btn.row-icon-email:hover  { background: #D3E3F2 !important; filter: none; }
.row-icon-btn.row-icon-reject.row-icon-undo:hover { background: #E1ECEF !important; }
/* В узком столбце «Решение» кнопки встают друг под друга, а не вылезают */
.decision-cell { white-space: normal; }
.decision-cell .row-action-icons { flex-wrap: wrap; }

/* ------------------------------------------------------------
   Z-06. «ОРГАНИЗАЦИИ НЕ СОВПАДАЮТ» - СТОЛБЦЫ РОВНО ПОД ЗАГОЛОВКАМИ.
   Раньше шапка была своим flex-рядом, а строки брали сетку .list-item
   из окна Чек/Акт-листов (9 столбцов) - сумма стояла под пустым
   местом, кнопки - под «Суммой». Теперь у шапки и строк одна сетка
   из 6 столбцов; сумма прижата вправо.
   ------------------------------------------------------------ */
#orgMismatchBody .om-head,
#orgMismatchBody .list-item.om-row {
    display: grid;
    grid-template-columns: 100px minmax(160px, 1fr) 130px 200px 200px 150px;
    column-gap: 14px;
    align-items: center;
    width: auto;
    min-width: 0;
}
#orgMismatchBody .om-head {
    font-size: 14px; font-weight: bold; padding: 8px 12px;
    background: #f8f9fa; border-radius: 6px; margin-bottom: 10px; color: #1a2634;
}
#orgMismatchBody .om-head .om-num,
#orgMismatchBody .list-item.om-row .amount { text-align: right; }

/* ============================================================
   Z-07. ЧАТ - «БИРЮЗОВОЕ ОКНО» (её выбор 23.09.2026, вариант 1:
   «посмотри как сделан чат [в Битриксе], сделай похожее, но моё»).
   Чат открывается окном на месте окон разделов (правее боковой панели,
   на фоне программы), а не узкой панелью у края. Внутри - белая
   карточка: слева список переписок, справа переписка на мягком
   бирюзовом фоне с едва заметным узором ₽ % Σ. Все правила - под
   #chatPanel: чат проекта (вкладка в «Проектах») не задет.
   ============================================================ */
#chatPanel.chat-panel {
    left: var(--sidebar-w, 272px);
    right: 0;
    width: auto;
    max-width: none;
    padding: 14px 18px;
    background: linear-gradient(115deg, var(--bg-c1, #8FCFDC) 0%, var(--bg-c2, #B9E2EA) 50%, var(--bg-c3, #E3F4F7) 100%);
    box-shadow: none;
}
/* «⤢» - поверх боковой панели, на весь экран */
#chatPanel.chat-panel.wide { left: 0; width: auto; }
#chatPanel .chat-body {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(11, 79, 94, 0.18);
}

/* ---------- список слева ---------- */
#chatPanel .chat-side { width: 360px; background: #fff; border-right: 1px solid #E3EEF1; }
#chatPanel .chat-side-top { display: flex; gap: 8px; align-items: center; padding: 12px; flex-shrink: 0; }
#chatPanel .chat-search {
    flex: 1; margin: 0; height: 38px; padding: 0 12px;
    border: 1.5px solid #CFE7EC; border-radius: 10px; background: #F7FBFC; font-size: 14px;
}
#chatPanel .chat-search:focus { outline: none; border-color: #3AA7BD; background: #fff; }
#chatPanel .chat-new-group-btn,
#chatPanel .chat-head-btn,
#chatPanel .chat-close {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    background: #fff; border: 1.5px solid #CFE7EC; color: #0B4F5E;
    font-size: 16px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
#chatPanel .chat-new-group-btn:hover,
#chatPanel .chat-head-btn:hover,
#chatPanel .chat-close:hover { background: #F3FAFB; border-color: #3AA7BD; }
#chatPanel .chat-close { font-size: 20px; }
#chatPanel .chat-contacts { padding: 0 0 8px; }
#chatPanel .chat-contact {
    gap: 12px; padding: 10px 14px; border-radius: 0;
    border-left: 4px solid transparent;
}
#chatPanel .chat-contact:hover { background: #F3FAFB; }
#chatPanel .chat-contact.active { background: #E6F5F8; border-left-color: #3AA7BD; }
/* текст строки обрезается многоточием и не заезжает под счётчик (span сам по себе не обрезается) */
#chatPanel .chat-contact-main { display: block; overflow: hidden; }
#chatPanel .chat-contact-last { display: block; }
#chatPanel .chat-contact-name { font-size: 15px; font-weight: 700; color: #1a2e38; }
#chatPanel .chat-contact-time { color: #7C9CA4; }
#chatPanel .chat-contact-last { color: #6c8791; }
#chatPanel .chat-contact.has-unread .chat-contact-last { color: #1a2e38; font-weight: 600; }
#chatPanel .chat-contact-unread {
    background: #E05A5A; min-width: 22px; height: 22px; line-height: 22px;
    border-radius: 11px; text-align: center; font-weight: 700; padding: 0 6px;
}

/* ---------- кружки: пастельные, свой цвет у каждого человека ---------- */
#chatPanel .chat-avatar { width: 42px; height: 42px; font-size: 15px; background: #5BA8C8; color: #fff; }
#chatPanel .chat-avatar.chat-av-0 { background: #5BA8C8; }
#chatPanel .chat-avatar.chat-av-1 { background: #E58FA8; }
#chatPanel .chat-avatar.chat-av-2 { background: #6CC4A4; }
#chatPanel .chat-avatar.chat-av-3 { background: #9A94E0; }
#chatPanel .chat-avatar.chat-av-4 { background: #E0A860; }
#chatPanel .chat-avatar.chat-av-5 { background: #7FB2C9; }
#chatPanel .chat-avatar-room { background: #3AA7BD; color: #fff; }

/* ---------- шапка переписки ---------- */
#chatPanel .chat-conv-head { gap: 12px; padding: 12px 18px; border-bottom: 1px solid #E3EEF1; background: #fff; }
#chatPanel .chat-conv-head .chat-avatar { width: 42px; height: 42px; font-size: 15px; background: #3AA7BD; }
#chatPanel .chat-conv-spacer { flex: 1; }
#chatPanel .chat-partner-name { font-size: 17px; font-weight: 700; color: #0B4F5E; }
#chatPanel .chat-partner-role { color: #6c8791; }

/* ---------- переписка ---------- */
#chatPanel .chat-messages {
    padding: 18px 26px;
    gap: 4px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='140'%3E%3Cg fill='%230B6B82' fill-opacity='0.06' font-family='Arial' font-weight='700' font-size='28'%3E%3Ctext x='10' y='40'%3E%E2%82%BD%3C/text%3E%3Ctext x='80' y='40'%3E%25%3C/text%3E%3Ctext x='150' y='40'%3E%CE%A3%3C/text%3E%3Ctext x='45' y='110'%3E%CE%A3%3C/text%3E%3Ctext x='115' y='110'%3E%E2%82%BD%3C/text%3E%3Ctext x='185' y='110'%3E%25%3C/text%3E%3C/g%3E%3C/svg%3E") repeat,
        linear-gradient(135deg, #CDEBF1 0%, #E3F4F7 45%, #D6EEF0 100%);
}
#chatPanel .chat-day {
    background: rgba(11, 79, 94, 0.55); color: #fff;
    border-radius: 12px; padding: 3px 12px; margin: 8px 0 10px;
}
#chatPanel .chat-new-line { color: #C0504D; margin: 8px 0 10px; }
#chatPanel .chat-new-line::before, #chatPanel .chat-new-line::after { background: #E7AFA9; }
/* строка сообщения: кружок автора (в группах) + облачко */
#chatPanel .chat-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 6px; }
#chatPanel .chat-row.same-author { margin-top: 0; }
#chatPanel .chat-row.mine { justify-content: flex-end; }
#chatPanel .chat-row .chat-avatar { width: 32px; height: 32px; font-size: 14px; }
#chatPanel .chat-row-gap { width: 32px; flex-shrink: 0; }
#chatPanel .chat-msg {
    max-width: 62%;
    background: #fff;
    border-radius: 14px;
    border-bottom-left-radius: 4px;
    padding: 8px 12px 6px;
    box-shadow: 0 1px 2px rgba(11, 79, 94, 0.12);
    font-size: 15px;
    line-height: 1.35;
}
#chatPanel .chat-msg.mine {
    background: #D3F0E6;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}
#chatPanel .chat-msg-author { font-weight: 700; font-size: 14px; margin-bottom: 2px; color: #2E7FA3; }
#chatPanel .chat-msg-author.chat-au-1 { color: #C0587A; }
#chatPanel .chat-msg-author.chat-au-2 { color: #2F8F6B; }
#chatPanel .chat-msg-author.chat-au-3 { color: #6A62C0; }
#chatPanel .chat-msg-author.chat-au-4 { color: #B07A2A; }
#chatPanel .chat-msg-author.chat-au-5 { color: #4F8AA5; }
#chatPanel .chat-msg-time { color: #7C9CA4; }
#chatPanel .chat-msg-file {
    display: flex; gap: 8px; align-items: center; margin-top: 4px;
    background: #F3FAFB; border: 1px solid #CFE7EC; border-radius: 8px; padding: 6px 10px;
}

/* ---------- поле ввода ---------- */
#chatPanel .chat-compose { gap: 10px; padding: 12px 18px; background: #fff; border-top: 1px solid #E3EEF1; align-items: center; }
#chatPanel .chat-clip {
    width: 36px; height: 36px; border-radius: 8px; border: 1.5px solid #CFE7EC;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
#chatPanel .chat-compose textarea {
    min-height: 44px; border: 1.5px solid #CFE7EC; border-radius: 12px; padding: 11px 14px; font-size: 15px;
}
#chatPanel .chat-compose textarea:focus { border-color: #3AA7BD; outline: none; }
#chatPanel .chat-send {
    width: 44px; height: 44px; border-radius: 50%; background: #0B6B82; color: #fff; font-size: 18px; flex-shrink: 0;
}
#chatPanel .chat-send:hover { background: #0B4F5E; }

/* ============================================================
   Z-08. ЛЕНТА - «ЛЕНТА И КОЛОНКА СПРАВА» (её выбор 23.09.2026, вариант 1).
   Слева лента белыми карточками, справа колонка «🎂 Дни рождения».
   Поиск - во всю ширину поля новой записи. Всё под #feedModal.
   ============================================================ */
#feedModal .feed-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
#feedModal .feed-search {
    width: 100%; height: 40px; margin-bottom: 12px; padding: 0 14px;
    border: 1.5px solid #CFE7EC; border-radius: 10px; background: #fff; font-size: 14px; box-sizing: border-box;
}
#feedModal .feed-search:focus { outline: none; border-color: #3AA7BD; }
#feedModal .feed-new {
    background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(11, 79, 94, 0.10);
    padding: 14px 18px; margin-bottom: 16px;
}
#feedModal .feed-new-row { display: flex; gap: 12px; align-items: flex-start; }
#feedModal .feed-new textarea {
    flex: 1; min-height: 46px; border: 1.5px solid #CFE7EC; border-radius: 12px;
    padding: 12px 14px; font-size: 15px; font-family: inherit; resize: vertical; box-sizing: border-box;
}
#feedModal .feed-new textarea:focus { outline: none; border-color: #3AA7BD; }
#feedModal .feed-new-btns { display: flex; gap: 8px; align-items: center; }
#feedModal .feed-new .btn { height: 38px; margin: 0; }
#feedModal .feed-publish { background: #0B6B82 !important; border-color: #0B6B82 !important; color: #fff !important; }
#feedModal .feed-publish:hover { background: #0B4F5E !important; }
#feedModal #feedPendingFiles { font-size: 14px; color: #55617a; margin: 6px 0 0 56px; }

/* кружки: 6 пастельных цветов по номеру человека, как в чате */
#feedModal .feed-av {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 15px; background: #5BA8C8;
}
#feedModal .feed-av img { width: 100%; height: 100%; object-fit: cover; }
#feedModal .feed-av-sm { width: 34px; height: 34px; font-size: 14px; }
#feedModal .feed-av-0 { background: #5BA8C8; } #feedModal .feed-av-1 { background: #E58FA8; }
#feedModal .feed-av-2 { background: #6CC4A4; } #feedModal .feed-av-3 { background: #9A94E0; }
#feedModal .feed-av-4 { background: #E0A860; } #feedModal .feed-av-5 { background: #7FB2C9; }
#feedModal .feed-av-me { background: #9A94E0; }

/* запись */
#feedModal .feed-post {
    background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(11, 79, 94, 0.10);
    padding: 16px 20px; margin-bottom: 14px;
}
#feedModal .feed-post.is-pinned { box-shadow: 0 0 0 2px #9FD3DD, 0 4px 18px rgba(11, 79, 94, 0.10); }
#feedModal .feed-post > .feed-head { display: flex; gap: 12px; align-items: center; }
#feedModal .feed-head { display: flex; gap: 12px; align-items: center; }
#feedModal .feed-who { flex: 1; min-width: 0; }
#feedModal .feed-name { font-weight: 700; color: #1a2e38; }
#feedModal .feed-pos { font-weight: 400; color: #6c8791; font-size: 14px; }
#feedModal .feed-when { font-size: 14px; color: #6c8791; }
#feedModal .feed-pin {
    color: #0B6B82; font-size: 14px; font-weight: 700; background: #E6F5F8;
    border-radius: 10px; padding: 2px 10px; white-space: nowrap;
}
#feedModal .feed-text { margin: 12px 0 10px 56px; font-size: 15px; line-height: 1.5; color: #1a2e38; white-space: pre-wrap; }
#feedModal .feed-files { display: flex; gap: 10px; flex-wrap: wrap; margin-left: 56px; align-items: center; }
#feedModal .feed-thumb { display: block; width: 120px; height: 80px; border-radius: 8px; overflow: hidden; border: 1px solid #CFE7EC; }
#feedModal .feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#feedModal .feed-file {
    display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 10px;
    background: #F3FAFB; border: 1px solid #CFE7EC; border-radius: 8px; font-size: 14px; color: #0B4F5E; text-decoration: none;
}
#feedModal .feed-acts { display: flex; gap: 18px; margin: 12px 0 0 56px; padding-top: 10px; border-top: 1px solid #EEF4F6; }
#feedModal .feed-act { background: none; border: none; padding: 0; cursor: pointer; font-size: 14px; font-weight: 600; color: #3A7F90; font-family: inherit; }
#feedModal .feed-act:hover { color: #0B4F5E; text-decoration: underline; }
#feedModal .feed-act-del { color: #A3271F; }
#feedModal .feed-cm { display: flex; gap: 10px; margin: 10px 0 0 56px; align-items: flex-start; }
#feedModal .feed-cm-b { background: #F3FAFB; border-radius: 12px; padding: 8px 12px; font-size: 14px; line-height: 1.4; color: #1a2e38; }
#feedModal .feed-cm-text { white-space: pre-wrap; font-size: 15px; }
/* Абзац записи и комментария (её выбор 22.10.2026, «а»): между абзацами - треть строки. */
#feedModal .feed-abz { display: block; margin-bottom: 6px; }
#feedModal .feed-abz:last-child { margin-bottom: 0; }
#feedModal .feed-reply { display: flex; gap: 10px; margin: 12px 0 0 56px; align-items: center; }
#feedModal .feed-reply input {
    flex: 1; height: 40px; border: 1.5px solid #CFE7EC; border-radius: 20px; padding: 0 16px; font-size: 14px; box-sizing: border-box;
}
#feedModal .feed-reply input:focus { outline: none; border-color: #3AA7BD; }
#feedModal .feed-send {
    width: 36px; height: 36px; border-radius: 50%; border: none; background: #0B6B82; color: #fff;
    font-size: 15px; cursor: pointer; flex-shrink: 0;
}

/* колонка «Дни рождения» */
#feedModal .feed-side {
    background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(11, 79, 94, 0.10);
    padding: 14px 16px; position: sticky; top: 0;
}
#feedModal .feed-side-title { font-weight: 800; font-size: 16px; color: #0B4F5E; border-left: 4px solid #3AA7BD; padding-left: 10px; margin-bottom: 10px; }
#feedModal .feed-bd { display: flex; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; }
#feedModal .feed-bd.is-today { background: #FFF3D6; }
#feedModal .feed-bd-name { font-weight: 600; color: #1a2e38; }
#feedModal .feed-bd-date { font-size: 14px; color: #6c8791; }
#feedModal .feed-bd-tag { display: inline-block; font-size: 14px; font-weight: 700; border-radius: 8px; padding: 0 6px; background: #E05A5A; color: #fff; margin-left: 4px; }
#feedModal .feed-bd-none { font-size: 14px; color: #6c8791; }


/* Ссылка в тексте комментария, сообщения, записи ленты (правка 374). */
.text-link { color: #137A8C; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.text-link:hover { color: #0B4F5E; }

/* ============================================================
   Z-09. ОДНА КНОПКА ВЫБОРА ФАЙЛА ВО ВСЕЙ ПРОГРАММЕ (её выбор 23.09.2026,
   вариант 1). Само поле <input type="file"> прячется (filepick.js
   вешает класс fp-native), рядом - белая кнопка «📎 Выбрать файл»,
   серым - какие файлы подходят, после выбора - плашка с именем файла.
   ============================================================ */
input[type="file"].fp-native {
    /* !important у ширины: у части полей в разметке стоит style="width:100%",
       и спрятанное поле всё равно занимало всю ширину - на телефоне оно
       вылезало за край экрана (найдено при адаптации 01.10.2026). */
    position: absolute; width: 1px !important; height: 1px !important; opacity: 0; overflow: hidden;
    clip: rect(0 0 0 0); pointer-events: none; margin: 0; padding: 0; border: 0;
}
.fp-wrap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; vertical-align: middle; max-width: 100%; }
.fp-btn {
    height: 38px; padding: 0 14px; box-sizing: border-box; cursor: pointer;
    background: #fff; border: 1.5px solid #9FD3DD; border-radius: 8px;
    font-size: 15px; font-weight: 600; color: #0B4F5E; font-family: inherit; white-space: nowrap;
}
.fp-btn:hover { background: #F3FAFB; border-color: #3AA7BD; }
.fp-hint { font-size: 14px; color: #6c8791; white-space: nowrap; }
.fp-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fp-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; box-sizing: border-box;
    background: #E6F5F8; border: 1px solid #3AA7BD; border-radius: 8px;
    font-size: 14px; color: #0B4F5E; max-width: 360px;
}
.fp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-x {
    width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; cursor: pointer;
    color: #A3271F; font-size: 14px; line-height: 22px; padding: 0; flex-shrink: 0; font-family: inherit;
}
.fp-x:hover { background: #FBE9E7; }


/* ============================================================
   Z-10. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ: СТОЛБЕЦ «МЕТКИ» (её выбор 23.09.2026).
   Вместо двух столбцов с галочками («Разовый», «≈ Сумма меняется») -
   один «Метки»: 1× и ≈ ставятся щелчком. Полосы дней из Z-10 убраны
   правкой Z-14 (её слова 24.09.2026: «вообще убери деление по дням»).
   ============================================================ */
/* Метки 1× / ≈: видна только поставленная; пустые проступают при наведении
   на САМУ ячейку «Метки» (Z-14, её правка 24.09.2026), а не на всю строку */
#paymentTable td.cal-marks-cell { padding: 2px 4px; text-align: center; white-space: nowrap; }
#paymentTable .cal-mark {
    display: inline-block; width: 30px; height: 26px; margin: 0 2px; padding: 0; box-sizing: border-box;
    border: 1.5px dashed #B9D7DE; border-radius: 6px; background: transparent;
    font-size: 14px; font-weight: 700; color: #0B4F5E; font-family: inherit; cursor: pointer; line-height: 22px;
    visibility: hidden;
}
#paymentTable td.cal-marks-cell:hover .cal-mark, #paymentTable .cal-mark:focus-visible { visibility: visible; }
#paymentTable .cal-mark.on { visibility: visible; background: #E6F5F8; border: 1.5px solid #9FD3DD; }
#paymentTable .cal-mark:hover { border-color: #3AA7BD; }

/* ============================================================
   Z-11. ЛИЗИНГ → «ВСЕ ОПЛАТЫ ПО ЛИЗИНГАМ» (её выбор 23.09.2026: «3 вариант,
   но ещё взять из 2 разделение по договорам»). Плитки итога, блок
   «Требует внимания», таблица по договорам, переключатель «Лизинг | Не лизинг».
   ============================================================ */
#lzAllPaymentsBody .lzap-tiles { display: flex; gap: 12px; margin: 8px 0 12px; }
#lzAllPaymentsBody .lzap-tile { flex: 1; background: #F3FAFB; border: 1.5px solid #D6ECF1; border-radius: 10px; padding: 10px 14px; }
#lzAllPaymentsBody .lzap-tile-l { font-size: 14px; color: #5B7480; }

#lzAllPaymentsBody .lzap-att { background: #FFFBEF; border: 1.5px solid #F0D98C; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
#lzAllPaymentsBody .lzap-att-h { font-size: 15px; font-weight: 700; color: #7A4E06; margin-bottom: 8px; }
#lzAllPaymentsBody .lzap-card { display: grid; grid-template-columns: 96px minmax(150px, 200px) 150px 1fr auto; gap: 12px; align-items: center;
    background: #fff; border: 1px solid #F0E2B6; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; font-size: 14px; color: #1a2e38; }
#lzAllPaymentsBody .lzap-c-sum { text-align: right; white-space: nowrap; }
#lzAllPaymentsBody .lzap-why { color: #8A5A0B; font-weight: 600; }
#lzAllPaymentsBody .lzap-act { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; justify-self: end; }
#lzAllPaymentsBody .lzap-cur-in { width: 110px; height: 32px; }
#lzAllPaymentsBody .lzap-yes { height: 32px; padding: 0 12px; border-radius: 8px; border: 1.5px solid #9CCFB2; background: #E4F3EA; color: #1F6B45; font-weight: 600; font-size: 14px; cursor: pointer; }
#lzAllPaymentsBody .lzap-yes:hover { border-color: #1F6B45; }
/* Разбить платёж по договорам (её правки 11.10.2026) - ссылка и панель над таблицей. */
#lzAllPaymentsBody .lzap-split { font-size: 14px; color: #0B6B82; text-decoration: none; border-bottom: 1px dotted #0B6B82; }
#lzAllPaymentsBody .lzap-splitbox { background: #fff; border: 1px solid #A9C9D1; border-top: 3px solid #0B6B82; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }
#lzAllPaymentsBody .lzap-splitbox input.lzap-split-auto { background: #F1F5F7; color: #425264; }
#lzAllPaymentsBody .lzap-splitbox input.lzap-split-err { border-color: #b13e3e; background: #FDF1F1; }
#lzAllPaymentsBody .lzap-split-f button.btn-info:disabled { opacity: 0.5; cursor: not-allowed; }
#lzAllPaymentsBody .lzap-split-h { font-size: 15px; font-weight: 600; color: #0B4F5E; }
#lzAllPaymentsBody .lzap-split-p { color: #425264; margin-top: 2px; }
#lzAllPaymentsBody .lzap-split-f { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 8px; }
#lzAllPaymentsBody .lzap-split-f > span { margin-right: auto; font-weight: 600; }

#lzAllPaymentsBody .lzap-cap { font-size: 14px; font-weight: 700; color: #5B7480; margin: 4px 0 6px; }
#lzAllPaymentsBody .lzap-table tr.lzap-g > td { background: #F2F6F7 !important; border-top: 2px solid #CFE3E8; border-bottom: 1px solid #DCE9ED; padding: 6px 10px; }
#lzAllPaymentsBody .lzap-g-i { color: #5B7480; }
#lzAllPaymentsBody .lzap-g-s { margin-left: auto; font-weight: 700; white-space: nowrap; }
#lzAllPaymentsBody .lzap-table tr.lzap-off > td { opacity: .55; }
/* Вариант В (20.10.2026): строка - только данные, действия - полосой над таблицей. */
#lzAllPaymentsBody .lzap-table tr.lzap-off > td { opacity: 1; color: #7c8899; }
#lzAllPaymentsBody .lzap-table tr.lzap-r { cursor: pointer; }
#lzAllPaymentsBody .lzap-pur1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #425264; }
#lzAllPaymentsBody .lzap-table { table-layout: fixed; }
#lzAllPaymentsBody .lzap-dog { overflow: hidden; text-overflow: ellipsis; }
#lzAllPaymentsBody .lzap-dog b { color: #0B4F5E; }
#lzAllPaymentsBody .lzap-m { display: inline-block; border: 1px solid #CFE7EC; border-radius: 4px; padding: 0 6px; font-size: 14px; color: #0B4F5E; white-space: nowrap; }
#lzAllPaymentsBody .lzap-m-w { border-color: #e3c766; color: #7a5a00; }
#lzAllPaymentsBody .lzap-ne { display: inline-block; background: #fdecea; color: #A3271F; border-radius: 10px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
#lzAllPaymentsBody .lzap-fil { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
#lzAllPaymentsBody .lzap-f { border: 1px solid #b9c8d2; border-radius: 14px; padding: 2px 12px; background: #fff; font-size: 14px; color: #1c2833; cursor: pointer; }
#lzAllPaymentsBody .lzap-f.on { background: #0B6B82; border-color: #0B6B82; color: #fff; }
#lzAllPaymentsBody .lzap-pan { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 10px; background: #0B4F5E; color: #fff; border-radius: 6px; margin: 6px 0; font-size: 14px; }
#lzAllPaymentsBody .lzap-pan button { background: #fff; color: #0B4F5E; border: 0; border-radius: 4px; padding: 4px 10px; font-size: 14px; cursor: pointer; }
#lzAllPaymentsBody .lzap-pan .lzap-pan-x { display: inline-flex; gap: 4px; align-items: center; }
#lzAllPaymentsBody .lzap-pan .lzap-pan-x .lz-paid-note { color: #d7eef3; }
#lzAllPaymentsBody .lzap-pan .lzap-pan-x0 { margin-left: auto; background: transparent; color: #fff; }
#lzAllPaymentsBody .lzap-table tr.lzap-itog > td { font-weight: 700; background: #F2F6F7; }
#lzAllPaymentsBody .lzap-pur { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; font-size: 14px; }
#lzAllPaymentsBody .lzap-spec { max-width: 240px; margin-bottom: 4px; }

#lzAllPaymentsBody .lzap-tg { display: inline-flex; border: 1.5px solid #9FD3DD; border-radius: 8px; overflow: hidden; height: 32px; background: #fff; }
#lzAllPaymentsBody .lzap-tg button { border: 0; background: transparent; padding: 0 10px; white-space: nowrap; font-size: 14px; color: #5B7480; cursor: pointer; height: 100%; }
#lzAllPaymentsBody .lzap-tg button + button { border-left: 1.5px solid #D6ECF1; }
#lzAllPaymentsBody .lzap-tg button:hover { background: #F3FAFB; color: #0B4F5E; }
#lzAllPaymentsBody .lzap-tg button.on { background: #E6F5F8; color: #0B4F5E; font-weight: 700; }
#lzAllPaymentsBody .lzap-tg button.on.off { background: #FBE9E7; color: #A3271F; }


/* ============================================================
   Z-12. СМАЙЛИКИ И «КТО ПРОСМОТРЕЛ» (её выбор 23.09.2026, вариант 1
   «как в Telegram»). Плашки смайликов под текстом сообщения, «👁 N» у
   времени, ✓/✓✓ у своих сообщений в личной переписке. Во всех окнах
   сообщений: чат, Лента, комментарии задач и заявок.
   ============================================================ */
.rx-slot { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.rx-slot:empty { display: none; }
.rx-chip { height: 26px; padding: 0 8px; border-radius: 13px; background: #EEF6F8; border: 1.5px solid #D6ECF1;
    display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: #0B4F5E; font-weight: 600;
    cursor: pointer; line-height: 1; }
.rx-chip:hover { border-color: #9FD3DD; }
.rx-chip.mine { background: #E6F5F8; border-color: #3AA7BD; }
.rx-chip .rx-e { font-size: 15px; }
.rx-eye-slot:empty { display: none; }
.rx-eye { border: 0; background: transparent; padding: 0 2px; font-size: 14px; color: #7C9CA4; cursor: pointer; }
.rx-eye:hover { color: #0B6B82; text-decoration: underline; }
.rx-tick { font-size: 14px; color: #9AA9B1; margin-left: 4px; letter-spacing: -2px; }
.rx-tick.read { color: #1F8A9E; font-weight: 700; }

.rx-picker { position: fixed; z-index: 100000; display: none; background: #fff; border: 1.5px solid #9FD3DD;
    border-radius: 20px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(11,79,94,.18); }
.rx-picker .rx-quick { display: flex; gap: 2px; }
.rx-picker button { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 50%;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0; }
.rx-picker button:hover { background: #E6F5F8; }
.rx-picker .rx-more { font-size: 18px; color: #0B6B82; font-weight: 700; }
.rx-picker .rx-all { display: none; grid-template-columns: repeat(8, 34px); gap: 2px; margin-top: 4px;
    padding-top: 4px; border-top: 1px solid #E3EEF1; }
.rx-picker.open { border-radius: 14px; }
.rx-picker.open .rx-all { display: grid; }

.rx-pop { position: fixed; z-index: 100001; background: #fff; border: 1.5px solid #9FD3DD; border-radius: 10px;
    box-shadow: 0 6px 18px rgba(11,79,94,.18); padding: 10px 12px; min-width: 220px; max-width: 300px;
    max-height: 60vh; overflow-y: auto; font-size: 14px; color: #1a2e38; }
.rx-pop-h { font-size: 14px; font-weight: 700; color: #5B7480; margin-bottom: 4px; }
.rx-pop-p { padding: 3px 0; }
.rx-pop-no { color: #9AA9B1; }
#feedModal .feed-post > .rx-slot { margin-left: 56px; }
#feedModal .feed-acts-eye { margin-left: auto; display: inline-flex; align-items: center; }


/* ============================================================
   Z-13. «МОИ КОНТАКТЫ» (её выбор 23.09.2026: «1, но чтобы можно было
   сортировать по направлениям»). Направление - цветной плашкой,
   «скопировать» проступает при наведении на строку, «Поделиться» и
   удаление - одинаковые квадратные кнопки, сортировка видна в шапке.
   ============================================================ */
/* Z-51 (её выбор 28.09.2026 «а»): направление - обычный текст, без плашки. */
#phonesModal .ph-dir { color: #2f4a52; font-weight: 400; font-size: 14px; }
#phonesModal .ph-dir-none { color: #9AA9B1; }
#phonesModal .phones-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px; cursor: pointer; user-select: none; }
#phonesModal .phones-sort .ph-sort-mark { color: #B9CBD1; font-size: 14px; }
#phonesModal .phones-sort:hover .ph-sort-mark { color: #3AA7BD; }
#phonesModal .phones-sort.is-active { color: #0B6B82; }
#phonesModal .phones-sort.is-active .ph-sort-mark { color: #0B6B82; }
#phonesModal .ph-copy { width: 26px; height: 24px; padding: 0; border: 1px solid #DCE9ED; border-radius: 6px; background: #fff;
    font-size: 14px; line-height: 1; cursor: pointer; visibility: hidden; flex-shrink: 0; }
#phonesModal tr.phones-row:hover .ph-copy, #phonesModal .ph-copy:focus-visible { visibility: visible; }
#phonesModal .ph-copy:hover { border-color: #3AA7BD; background: #F3FAFB; }
#phonesModal .ph-acts { display: flex; gap: 6px; justify-content: center; }   /* Z-51: было flex-end */
/* Z-51: тонкие светло-бирюзовые линии между столбцами (как в «Договорах»)
   и подпись последнего столбца «Поделиться / удалить». */
#phonesModal #phonesTable th + th,
#phonesModal #phonesTable tbody tr.phones-row > td + td { border-left: 1px solid #C9E3E9; }
#phonesModal #phonesTable th.ph-acts-th { width: 150px; text-align: center; white-space: nowrap; vertical-align: top; }
/* Значки «поделиться» и «удалить» - обычные, как в записной книжке и таблицах программы
   (её правка 28.10.2026: «уменьши значки до стандартных»): без рамки и заливки. */
#phonesModal .ph-act { border: none; background: none; font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
#phonesModal .ph-act:hover { background: #E3F1F4; }
#phonesModal .ph-act-del:hover { background: #FBE9E7; }
#phonesModal #phonesTable td a { color: #0B6B82; text-decoration: none; }
#phonesModal #phonesTable td a:hover { text-decoration: underline; }
/* На телефоне наведения нет - «скопировать» виден всегда. */
@media (hover: none) { #phonesModal .ph-copy { visibility: visible; } }


/* ============================================================
   ДУБЛИ (правка 384, её выбор 24.09.2026 - вариант 1 образца
   obrazec_dubli.html). Одинаковые строки в платёжном календаре, в
   «Договорах» и в «Лизинг → Договоры» помечаются сами, без кнопки:
   лиловая полоса слева и плашка «⧉ дубль N из M · убрать». Лиловый -
   потому что в программе он ещё ничего не значит: зелёный (оплачено),
   красный (просрочено) и жёлтый (другой суммой) остаются своими.
   «убрать» - только у строк, которые ниоткуда не тянутся (её правило:
   «дубль 2 - это ручной вариант, чтобы не удалить лизинговый договор»).
   ============================================================ */
#paymentTable tbody tr.cal-dup-row > td:first-child { box-shadow: inset 4px 0 0 #7C73D8; }
.dup-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; margin-top: 4px;
    border-radius: 12px; background: #EFEDFB; border: 1px solid #C9C4EE; color: #4B43A0;
    font-size: 14px; font-weight: 700; white-space: nowrap; cursor: default;
}
/* В календаре ячейка - высотой в строку, а текст занимает её целиком
   (высота 100%): плашка ставится в нижний угол ячейки, а тексту даётся
   место сверху. */
#tableTab .payment-table tbody td.cal-dup-cell { position: relative; }
#tableTab .payment-table tbody td.cal-dup-cell .cal-wrap-view { align-items: flex-start; padding-top: 6px; padding-bottom: 34px; }
#tableTab .payment-table tbody td.cal-dup-cell .dup-chip { position: absolute; left: 6px; bottom: 5px; margin: 0; }
.dup-chip .dup-del { color: #A3271F; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dup-chip .dup-del:hover { color: #7a1c15; }
.dup-top {
    display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; margin-left: 10px;
    border-radius: 8px; background: #EFEDFB; border: 1.5px solid #C9C4EE; color: #4B43A0; font-size: 14px; font-weight: 700;
}
/* Списки «Договоры» (строка таблицы) и «Лизинг → Договоры» (карточка): полоса слева. */
.lz-li.dup-row { box-shadow: inset 4px 0 0 #7C73D8 !important; }
tr.dup-row > td:first-child { box-shadow: inset 4px 0 0 #7C73D8; }
.lz-li .dup-chip { margin-top: 4px; }


/* ============================================================
   НОВАЯ СТРОКА КАЛЕНДАРЯ - ЧЕРНОВИК ДО «ГОТОВО» (правка 385, её выбор
   по образцу obrazec_novaya_stroka.html, вариант А). Стоит первой,
   бледно-жёлтая (calendar-row-new), слева полоса и 📌; пустые
   обязательные поля (дата, сумма, контрагент) - пунктиром; в конце
   строки галочка «готово»: серая, пока полей нет, зелёная - когда можно.
   ============================================================ */
#tableTab .payment-table tbody tr.cal-draft-row > td:first-child {
    box-shadow: inset 4px 0 0 #e6c84f;
}
.cal-draft-pin { font-size: 14px; margin-right: 2px; }
td.cal-draft-pin-cell { white-space: nowrap; }
/* 📌 и число месяца - в одну линию (в узком столбце значок уезжал наверх). */
#tableTab .payment-table tbody td.cal-draft-pin-cell { position: relative; }
#tableTab .payment-table tbody td.cal-draft-pin-cell > .cal-draft-pin {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%); margin: 0; line-height: 1;
}
#tableTab .payment-table tbody td.cal-draft-pin-cell .cal-wrap-view {
    display: block; padding-left: 24px; padding-right: 2px; white-space: nowrap; overflow: visible;
}
td.cal-draft-pin-cell input { width: 28px !important; }
tr.cal-draft-row td.cal-need input,
tr.cal-draft-row td.cal-need .cal-wrap-view {
    outline: 1px dashed #b89a1e;
    outline-offset: -1px;
    background: #fffdf3;
}
.cal-draft-done {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; color: #5b6b7c; cursor: not-allowed; margin-right: 6px;
}
.cal-draft-done input { width: 18px; height: 18px; margin: 0; }
.cal-draft-done.ready { color: #2e8b57; font-weight: 600; cursor: pointer; }
.cal-draft-done.ready input { cursor: pointer; }
.cal-draft-need { font-size: 14px; color: #7a6412; white-space: nowrap; }

/* ============================================================
   Z-16. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ (её снимок и выбор 24.09.2026: «сделай, чтобы
   шапка не просвечивала», «метки 1, договор 2», «дизайн скрепки изменить,
   он выбивается»).
   ============================================================ */
/* 1. ШАПКА НЕ ПРОСВЕЧИВАЕТ. Было: заголовки и строка поиска липли к верху
   по отдельности, строка поиска - на высоте --pay-head-h, которую JS мерил
   при отрисовке. Высота заголовков потом менялась (шрифты, перенос
   названий), отступ оставался старым (27px при настоящих 43px): строка
   поиска заезжала под заголовки, под ней проглядывали строки таблицы.
   Стало: липнет вся шапка целиком (thead) - обе строки вместе, без
   отступов и замеров. Ячейки шапки - relative, чтобы ползунок ширины
   (.col-resizer) остался на месте. */
#tableTab .payment-table thead {
    position: sticky;
    top: 0;
    z-index: 12;
}
#tableTab .payment-table thead tr:first-child th,
#tableTab .payment-table thead tr#paymentFilterRow th,
#paymentTable thead tr:first-child th {
    position: relative;
    top: auto;
}

/* 2. МЕТКА-ИСТОЧНИК «🚗 / 🛡 / 📁» - видна всегда, тёмная бирюза: её не
   ставят руками, она про то, откуда строка. Серых пятен у заблокированных
   даты и суммы больше нет - строка одного цвета. */
#paymentTable .cal-mark.cal-mark-src {
    visibility: visible;
    border: 1.5px solid #0B6B82; background: #0B6B82; color: #fff;
    font-size: 15px;
}
#paymentTable .cal-mark.cal-mark-src:hover { background: #137A8C; border-color: #137A8C; }
#tableTab .payment-table tbody td.cal-wrap-cell .cal-wrap-view.cal-wrap-locked { background: transparent; }

/* 3. ФАЙЛ ДОГОВОРА/СЧЁТА - квадратные кнопки одного вида (как 📤 🗑 в
   «Моих контактах», Z-13): 📄 открыть, 🗑 удалить (светло-красная),
   📎 прикрепить (белая с бирюзовой рамкой) - вместо красного ✕ и синего
   квадрата. Места в сетке ячейки те же. */
#paymentTable .calendar-doc-cell .cal-doc-open,
#paymentTable .calendar-doc-cell .calendar-file-btn {
    flex: none;
    width: 28px; height: 28px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1.5px solid #9FD3DD; background: #fff;
    font-size: 14px; color: #0B4F5E; text-decoration: none; cursor: pointer; padding: 0;
    overflow: visible;
}
#paymentTable .calendar-doc-cell .cal-doc-open:hover,
#paymentTable .calendar-doc-cell .calendar-file-btn.is-attach:hover {
    background: #F3FAFB; border-color: #3AA7BD; filter: none;
}
#paymentTable .calendar-doc-cell .calendar-file-btn.is-delete {
    background: #FBE9E7; border-color: #E7AFA9;
}
#paymentTable .calendar-doc-cell .calendar-file-btn.is-delete:hover {
    background: #FBE9E7; border-color: #A3271F;
}
/* Z-60 (её выбор 30.09.2026, «а»): файл из карточки договора лизинга /
   кредита - та же кнопка 📄, но с пунктирной рамкой: видно, что он не
   приложен к строке, а берётся из договора. «нет» - в карточке файлов нет. */
#paymentTable .calendar-doc-cell .cal-doc-open.is-from-contract {
    border-style: dashed; border-color: #0B6B82;
}
#paymentTable .calendar-doc-cell .cal-doc-none { color: #7A8A96; font-size: 14px; cursor: help; }

/* ============================================================
   Z-17. ОБУЧЕНИЕ «КАК УЧЕБНИК» (её выбор 24.09.2026: курс у сотрудника -
   содержание слева, раздел справа; правка курса вкладками; редактор
   раздела «как в Word» - вариант А).
   Окно - #trainingModal: в описании чата визуала стоял #employeesTrainingTab
   (вкладка в «Сотрудниках»), но с правки 368 обучение - своё окно.
   ============================================================ */
#trainingModal .trn-course-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; margin-bottom: 10px; flex-wrap: wrap; }
#trainingModal .trn-course-main { flex: 1; min-width: 260px; cursor: pointer; }
#trainingModal .trn-course-name { font-size: 17px; font-weight: 700; color: #0B4F5E; }
#trainingModal .trn-course-desc { color: #55617a; font-size: 14px; margin-top: 4px; }
#trainingModal .trn-course-meta { color: #7C9CA4; font-size: 14px; margin-top: 4px; }
#trainingModal .trn-course-meta b { color: #1F6B45; font-weight: 600; }
#trainingModal .trn-course-acts { display: flex; gap: 6px; }
#trainingModal .trn-draft { color: #b26a00; font-size: 14px; font-weight: 400; margin-left: 6px; }

/* ============================================================
   Z-58. ОБУЧЕНИЕ: ВРЕМЯ НА ТЕСТ (её выбор 29.09.2026, «1а, 2 да, 3а»).
   Обратный отсчёт справа в строке «Вопрос N из M»; последняя минута -
   жёлтым. Подпись «пусто — без ограничения» под полями настроек курса.
   ============================================================ */
#trainingModal .trn-qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #7d879b; font-size: 14px; }
#trainingModal .trn-timer { font-weight: 700; font-variant-numeric: tabular-nums; color: #0B4F5E;
    border: 1px solid #9FD3DD; background: #F3FAFB; border-radius: 8px; padding: 3px 10px; font-size: 15px; }
#trainingModal .trn-timer.is-warn { color: #7a4a0b; border-color: #F0C98A; background: #FFF4E5; }
#trainingModal .trn-hint { font-size: 14px; color: #8a9aa3; font-weight: normal; }

/* курс у сотрудника */
#trainingModal .trn-reader { padding: 0; overflow: hidden; }
#trainingModal .trn-reader-head, #trainingModal .trn-edit-head {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #E3EEF1; }
#trainingModal .trn-reader-title { font-size: 17px; color: #0B4F5E; }
#trainingModal .trn-reader-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
#trainingModal .trn-toc { background: #F3FAFB; border-right: 1px solid #DCE9ED; padding: 14px 12px; }
#trainingModal .trn-prog { height: 8px; border-radius: 4px; background: #DCE9ED; overflow: hidden; }
#trainingModal .trn-prog i { display: block; height: 100%; background: #1F7A4D; }
#trainingModal .trn-prog-t { font-size: 14px; color: #5B7480; margin: 4px 0 12px; }
#trainingModal .trn-toc-it { display: flex; gap: 8px; align-items: center; padding: 9px 10px; border-radius: 8px;
    margin-bottom: 4px; font-weight: 600; color: #1a2e38; cursor: pointer; }
#trainingModal .trn-toc-it:hover { background: #fff; }
#trainingModal .trn-toc-it.cur { background: #fff; box-shadow: inset 3px 0 0 #0B6B82; }
#trainingModal .trn-st { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex;
    align-items: center; justify-content: center; font-size: 14px; border: 1.5px solid #B9CBD1; color: #7C9CA4; background: #fff; }
#trainingModal .trn-toc-it.cur .trn-st { background: #0B6B82; border-color: #0B6B82; color: #fff; }
#trainingModal .trn-toc-it.done .trn-st { background: #E4F3EA; border-color: #9CCFB2; color: #1F6B45; }
#trainingModal .trn-toc-final { color: #5B7480; }
#trainingModal .trn-page { padding: 20px 30px 18px; max-width: 920px; }
#trainingModal .trn-crumb { color: #7C9CA4; font-size: 14px; margin-bottom: 4px; }
#trainingModal .trn-h { margin: 0 0 12px; font-size: 22px; color: #0B4F5E; }
#trainingModal .trn-p, #trainingModal .trn-text { font-size: 15px; line-height: 1.6; color: #1a2e38; }
#trainingModal .trn-cap { color: #5B7480; font-size: 14px; margin-top: 6px; }
#trainingModal .trn-video { position: relative; width: 100%; max-width: 820px; aspect-ratio: 16 / 9; border-radius: 10px;
    overflow: hidden; background: #0F2A33; }
#trainingModal .trn-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#trainingModal .trn-link { display: inline-flex; gap: 6px; align-items: center; border: 1.5px solid #9FD3DD; border-radius: 8px;
    padding: 7px 12px; font-weight: 600; color: #0B6B82; text-decoration: none; background: #fff; }
#trainingModal .trn-link:hover { border-color: #3AA7BD; background: #F3FAFB; }
#trainingModal .trn-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 1px solid #E3EEF1; padding-top: 14px; margin-top: 18px; flex-wrap: wrap; }
#trainingModal .trn-noq { color: #7C9CA4; font-size: 14px; }

/* правка курса */
#trainingModal .trn-edit { padding: 0 0 16px; overflow: hidden; }
#trainingModal .trn-edit > :not(.trn-edit-head):not(.trn-tabs) { margin-left: 16px; margin-right: 16px; }
#trainingModal .trn-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid #E3EEF1; margin-bottom: 14px; }
#trainingModal .trn-tab { border: 0; background: transparent; padding: 9px 14px; font-size: 14px; font-weight: 700;
    color: #5B7480; cursor: pointer; border-radius: 8px 8px 0 0; }
#trainingModal .trn-tab:hover { color: #0B4F5E; background: #F3FAFB; }
#trainingModal .trn-tab.on { color: #0B4F5E; box-shadow: inset 0 -3px 0 #0B6B82; }
#trainingModal .trn-sec-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid #ecf0f1; }
#trainingModal .trn-sec-main { flex: 1; cursor: pointer; }

/* редактор раздела «как в Word» */
#trainingModal .trn-wys { max-width: 980px; }
#trainingModal .trn-wys-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
#trainingModal .trn-wys-title { flex: 1; min-width: 260px; font-size: 22px; font-weight: 800; color: #0B4F5E;
    border: 0; border-bottom: 2px dashed #CFE3E8; padding: 4px 2px; background: transparent; }
#trainingModal .trn-wys-title:focus { outline: none; border-bottom-color: #3AA7BD; }
#trainingModal .trn-wys-blocks.trn-drag { outline: 2px dashed #3AA7BD; outline-offset: 4px; border-radius: 10px; }
#trainingModal .trn-wys-blk { position: relative; border: 1.5px solid transparent; border-radius: 10px; padding: 8px 10px; }
#trainingModal .trn-wys-blk:hover, #trainingModal .trn-wys-blk:focus-within { border-color: #9FD3DD; background: #FBFEFE; }
#trainingModal .trn-wys-tools { position: absolute; right: 8px; top: -16px; display: none; gap: 3px; align-items: center;
    background: #fff; border: 1.5px solid #9FD3DD; border-radius: 8px; padding: 3px; z-index: 2; }
#trainingModal .trn-wys-blk:hover .trn-wys-tools, #trainingModal .trn-wys-blk:focus-within .trn-wys-tools { display: inline-flex; }
#trainingModal .trn-wys-tools > button, #trainingModal .trn-sz button { min-width: 26px; height: 26px; border: 0; border-radius: 6px;
    background: transparent; font-size: 14px; cursor: pointer; color: #0B4F5E; padding: 0 5px; }
#trainingModal .trn-wys-tools > button:hover:not(:disabled) { background: #E6F5F8; }
#trainingModal .trn-wys-tools > button:disabled { opacity: .35; cursor: default; }
#trainingModal .trn-wys-tools .trn-del { background: #FBE9E7; }
#trainingModal .trn-wys-tools select { height: 26px; font-size: 14px; border: 1px solid #D6ECF1; border-radius: 6px; }
#trainingModal .trn-sz { display: inline-flex; border: 1.5px solid #9FD3DD; border-radius: 6px; overflow: hidden; }
#trainingModal .trn-sz button { border-radius: 0; color: #5B7480; }
#trainingModal .trn-sz button.on { background: #E6F5F8; color: #0B4F5E; font-weight: 700; }
#trainingModal .trn-wys-text { width: 100%; border: 0; resize: none; overflow: hidden; background: transparent;
    font: inherit; font-size: 15px; line-height: 1.6; color: #1a2e38; padding: 2px; }
#trainingModal .trn-wys-text:focus, #trainingModal .trn-wys-in:focus { outline: none; }
#trainingModal .trn-wys-cap { font-size: 14px; color: #5B7480; margin-top: 4px; }
#trainingModal .trn-wys-in { width: 100%; border: 1.5px solid #D6ECF1; border-radius: 6px; padding: 6px 9px; margin-top: 6px;
    font-size: 14px; background: #fff; }
#trainingModal .trn-wys-in.trn-wys-cap { border-style: dashed; }
#trainingModal .trn-wys-linkrow { display: flex; gap: 8px; align-items: center; }
#trainingModal .trn-wys-linkrow .trn-wys-in { margin-top: 0; }
#trainingModal .trn-wys-drop { display: block; border: 2px dashed #9FD3DD; border-radius: 10px; padding: 22px 16px;
    text-align: center; color: #5B7480; background: #F7FCFD; cursor: pointer; line-height: 1.5; }
#trainingModal .trn-wys-drop:hover { border-color: #3AA7BD; background: #F3FAFB; }
#trainingModal .trn-wys-drop-video { cursor: default; }
#trainingModal .trn-wys-replace { display: inline-block; margin-top: 6px; font-size: 14px; color: #0B6B82; cursor: pointer; }
#trainingModal .trn-wys-state { font-size: 14px; color: #7C9CA4; margin-left: 8px; }
#trainingModal .trn-wys-empty { color: #5B7480; background: #F7FCFD; border: 1.5px dashed #CFE3E8; border-radius: 10px;
    padding: 14px 16px; line-height: 1.5; }
#trainingModal .trn-ins { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; margin: 2px 0; }
#trainingModal .trn-ins::before, #trainingModal .trn-ins::after { content: ''; flex: 1; border-top: 1.5px dashed transparent; }
#trainingModal .trn-ins:hover::before, #trainingModal .trn-ins:hover::after,
#trainingModal .trn-ins.open::before, #trainingModal .trn-ins.open::after { border-top-color: #CFE3E8; }
#trainingModal .trn-ins-plus { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #9FD3DD; background: #fff;
    color: #0B6B82; font-weight: 800; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: .55; }
#trainingModal .trn-ins:hover .trn-ins-plus, #trainingModal .trn-ins.open .trn-ins-plus { opacity: 1; }
#trainingModal .trn-ins-menu { display: none; gap: 6px; flex-wrap: wrap; }
#trainingModal .trn-ins.open .trn-ins-menu { display: inline-flex; }
#trainingModal .trn-wys-preview { border: 1px solid #DCE9ED; border-radius: 10px; padding: 16px 22px; }
@media (max-width: 800px) {
    #trainingModal .trn-reader-grid { grid-template-columns: 1fr; }
    #trainingModal .trn-toc { border-right: 0; border-bottom: 1px solid #DCE9ED; }
    #trainingModal .trn-wys-tools { display: inline-flex; position: static; margin-bottom: 6px; }
}

/* ============================================================
   Z-18. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ: ОПЛАТЫ «НА СЕГОДНЯ» - ЯНТАРНАЯ ТОЧКА ПЕРЕД
   ДАТОЙ (её выбор 24.09.2026, вариант Г: «чтобы не рябило в глазах»).
   Строка не красится, полос и рамок нет - только точка ● #E0A800 перед
   текстом даты у неоплаченных платежей сегодняшнего дня (в пятницу - и
   субботы, и воскресенья). Класс строки ставит renderTable (cal-due-today).
   ============================================================ */
#paymentTable tr.cal-due-today > td.cal-date-cell .cal-wrap-text::before {
    content: '●';
    color: #E0A800;
    margin-right: 6px;
    font-size: 15px;
}

/* ============================================================
   Z-19. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ ТИШЕ + БОКОВЫЕ СТРЕЛКИ ПРОЗРАЧНЕЕ
   (её правка 24.09.2026: «посмотри сколько пестроты опять»; выбор -
   вариант А, стрелки - уровень 1; «статья и комментарии пусть
   появляются не при наведении на строку, а при наведении на ячейку»).
   ============================================================ */
/* 1-2. Цвета значков заданы переменными --z19-bg / --z19-line: в покое
   они прозрачные, на ЯЧЕЙКЕ под мышью им даются цвета (Z-27, её правка
   25.09.2026: «при наведении на строку все значки в метках и договорах
   пляшут, пусть появляются только при наведении на ячейку»; было - на
   строке). Так сделано
   потому, что test_theme.js запрещает правилам «tr:hover» задавать
   фон цветом (это правило про подсветку строк); здесь же красится не
   строка, а сами кнопки. */
/* 1. Метка-источник 🚗 / 🛡 / 📁 - без тёмной плашки, серая. На строке
   под мышью - цветная, в светлой рамке (как остальные метки). */
#paymentTable .cal-mark.cal-mark-src {
    --z19-bg: transparent; --z19-line: transparent;
    background: var(--z19-bg); border-color: var(--z19-line); color: inherit;
    filter: grayscale(1); opacity: 0.75;
}
#paymentTable td:hover .cal-mark.cal-mark-src,
#paymentTable .cal-mark.cal-mark-src:focus-visible {
    --z19-bg: #F3FAFB; --z19-line: #9FD3DD;
    filter: none; opacity: 1;
}
#paymentTable td:hover .cal-mark.cal-mark-src:hover { --z19-line: #3AA7BD; }

/* 2. Файл договора/счёта: 📄 и 📎 - без рамок, серые; на строке под
   мышью - цветные в белых квадратах (как было в Z-16). 🗑 «удалить
   файл» видна только на строке под мышью. Места в сетке ячейки те же
   (visibility, а не display - ничего не съезжает). */
#paymentTable .calendar-doc-cell .cal-doc-open,
#paymentTable .calendar-doc-cell .calendar-file-btn {
    --z19-bg: transparent; --z19-line: transparent;
    background: var(--z19-bg); border-color: var(--z19-line);
    filter: grayscale(1); opacity: 0.7;
}
#paymentTable .calendar-doc-cell .calendar-file-btn.is-delete {
    visibility: hidden; background: var(--z19-bg); border-color: var(--z19-line);
}
#paymentTable td:hover .calendar-doc-cell .cal-doc-open,
#paymentTable td:hover .calendar-doc-cell .calendar-file-btn,
#paymentTable .calendar-doc-cell .cal-doc-open:focus-visible,
#paymentTable .calendar-doc-cell .calendar-file-btn:focus-visible {
    --z19-bg: #fff; --z19-line: #9FD3DD;
    filter: none; opacity: 1;
}
#paymentTable td:hover .calendar-doc-cell .calendar-file-btn.is-delete,
#paymentTable .calendar-doc-cell .calendar-file-btn.is-delete:focus-visible {
    --z19-bg: #FBE9E7; --z19-line: #E7AFA9;
    visibility: visible;
}
#paymentTable td:hover .calendar-doc-cell .cal-doc-open:hover,
#paymentTable td:hover .calendar-doc-cell .calendar-file-btn.is-attach:hover {
    --z19-bg: #F3FAFB; --z19-line: #3AA7BD;
}
#paymentTable td:hover .calendar-doc-cell .calendar-file-btn.is-delete:hover { --z19-line: #A3271F; }

/* 3. Бледные подсказки пустых ячеек («статья», «Комментарий», «—» и
   т.п.) - только под мышью на САМОЙ ЯЧЕЙКЕ (не на строке), при правке
   и при переходе в ячейку клавишей Tab. Вписанный текст виден всегда. */
#tableTab .payment-table tbody td.cal-wrap-cell:not(:hover):not(:focus-within):not(.cal-wrap-editing) .cal-wrap-view.is-empty .cal-wrap-text {
    color: transparent;
}

/* 4. Боковые стрелки ‹ › ВО ВСЕЙ ПРОГРАММЕ (доски, календарь, таблицы) -
   размер прежний, прозрачнее: круг - переменная --arrow-bg (0.30 вместо
   0.55, см. :root у .hscroll-arrow), тень легче, шеврон бледнее. Под
   мышью - как раньше: плотный круг, тёмный шеврон, прежняя тень.
   Селекторы в одну строку: проверка test_strelki_i_period.js следит, чтобы
   .kanban-arrow и .hscroll-arrow были объявлены отдельно один раз. */
.kanban-arrow, .hscroll-arrow {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: var(--arrow-ink-soft, rgba(11, 107, 130, 0.85));
}
.kanban-arrow:hover, .hscroll-arrow:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    color: var(--arrow-ink);
}

/* ============================================================
   Z-21. БОКОВОЕ МЕНЮ ЛЕГЧЕ (её выбор 24.09.2026, вариант Г: «пока
   ближе как есть» - плашки разделов остаются, но светлее).
   ============================================================ */
/* 1. Плашка раздела - светлее прежней серой, углы 6px, текст тёмно-
   бирюзовый; разрядка меньше - «ОСНОВНЫЕ СРЕДСТВА» в одну строку.
   −/+ слева, как было, только без подложки. */
.sidebar .section-title {
    background: #F1F7F9;
    color: #0B4F5E;
    letter-spacing: 0.5px;
    padding: 5px 8px;
    margin: 14px 0 4px 0;
    border-radius: 6px;
}
.sidebar .section-title:hover { background: #E0F2F6; }
.sidebar .section-toggle { background: transparent; color: #7C9CA4; }

/* 2. Открытый пункт - бирюзовый, в цвет программы (был голубой):
   заливка #E0F2F6, полоса слева 4px #0B6B82, текст жирный. */
.sidebar .btn-group .btn.sidebar-btn-active,
.sidebar .btn-group .btn.sidebar-btn-active:hover:not(:disabled) {
    background: #E0F2F6 !important;
    color: #0B4F5E !important;
    font-weight: 600 !important;
    box-shadow: inset 4px 0 0 #0B6B82 !important;
}

/* 3. Счётчики у пунктов - бирюзовые. Красный «непрочитано» (Лента,
   Чат) не трогаем: он про то, что человек ждёт ответа. */
.sidebar .btn-counter:not(.is-unread) { background: #E0F2F6; color: #0B6B82; font-weight: 600; }
/* На открытом пункте цифра - того же цвета, что и надпись (её правка
   15.10.2026: «кнопка согласование счетов окрашивается в 2 разных оттенка и
   цифры рядом с ней тоже»): было #0B4F5E у слов и #0B6B82 у числа. */
.sidebar .btn-group .sidebar-btn-active > .btn-counter:not(.is-unread) { background: transparent; color: #0B4F5E; }

/* 4. Имя и роль - в одну строку; фирма - на всю ширину, рядом
   шестерёнка в белом квадрате (разметка - index.html, .sb-user). */
.sidebar .sb-user { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.sidebar .sb-user-name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sidebar .sb-user-name strong { font-size: 15px; color: #0B4F5E; }
.sidebar .sb-user-role { font-size: 14px; color: #7C9CA4; }
.sidebar .sb-user-org { display: flex; gap: 6px; align-items: center; }
.sidebar .sb-user-org select {
    flex: 1; min-width: 0; padding: 6px 8px; font-size: 14px;
    border: 1px solid #9FD3DD; border-radius: 8px; background: #fff; color: #0B4F5E;
}
.sidebar .sb-user-gear {
    flex: none; width: 34px; height: 34px; border: 1px solid #9FD3DD; border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 15px; filter: grayscale(1);
}
.sidebar .sb-user-gear:hover { border-color: #3AA7BD; filter: none; }

/* 5. Низ меню: «Настройка расположения» и «Выйти» - по левому краю,
   как остальные пункты. */
.sidebar .sidebar-footer { align-items: stretch; }
.sidebar .sidebar-footer .settings-gear { justify-content: flex-start; text-align: left; padding: 8px 10px; color: #0B4F5E; }

/* ============================================================
   ЛЕВАЯ ПАНЕЛЬ В ЦВЕТЕ ТЕМЫ (её выбор 22.10.2026, вариант А по образцу
   Obrazcy_levaya_panel_cvet.html: «добавь к смене цвета окрашивание
   элементов в панели слева»). Панель остаётся белой, как в Z-21; в цвет
   темы - плашки разделов, −/+, открытый пункт с полосой слева, счётчики,
   имя и роль, рамки поля фирмы и шестерёнки. Только у тем, что меняют
   оформление (ui-themed); стандартная и голубая (только фон) - как было.
   Красный счётчик непрочитанного не трогаем.
   ============================================================ */
body.ui-themed .sidebar .section-title { background: var(--th-soft-bg); color: var(--wc-text-main); }
body.ui-themed .sidebar .section-title:hover { background: var(--th-head-bg); }
body.ui-themed .sidebar .section-toggle { color: var(--wc-text-sub); }
body.ui-themed .sidebar .btn-group .btn.sidebar-btn-active,
body.ui-themed .sidebar .btn-group .btn.sidebar-btn-active:hover:not(:disabled) {
    background: var(--th-head-bg) !important;
    color: var(--wc-text-main) !important;
    box-shadow: inset 4px 0 0 var(--accent-dark) !important;
}
body.ui-themed .sidebar .btn-counter:not(.is-unread) { background: var(--th-head-bg); color: var(--accent-dark); }
body.ui-themed .sidebar .btn-group .sidebar-btn-active > .btn-counter:not(.is-unread) { background: transparent; color: var(--wc-text-main); }
body.ui-themed .sidebar .sb-user-name strong { color: var(--wc-text-main); }
body.ui-themed .sidebar .sb-user-role { color: var(--wc-text-sub); }
body.ui-themed .sidebar .sb-user-org select { border-color: var(--th-field-border); color: var(--wc-text-main); }
body.ui-themed .sidebar .sb-user-gear { border-color: var(--th-field-border); }
body.ui-themed .sidebar .sb-user-gear:hover { border-color: var(--accent); }
body.ui-themed .sidebar #globalSearchTrigger { border-color: var(--th-field-border); }
body.ui-themed .sidebar .sidebar-footer .settings-gear { color: var(--wc-text-main); }

/* ============================================================
   Z-23. ЛИЗИНГ → ПЛАТЕЖИ: ЗЕЛЁНЫЙ У ОПЛАЧЕННЫХ СТРОК СВЕТЛЕЕ
   (её правка 24.09.2026: «уменьши немного зелёный», выбор - «1»:
   тот же зелёный, что у оплаченных строк платёжного календаря).
   Только таблица вкладки «Платежи» (#lzTableBody). Под мышью - тот
   же цвет чуть гуще, как в календаре. Штрафы и прочие таблицы с
   классом leasing-paid-row не меняются.
   ============================================================ */
#lzTableBody tr.leasing-paid-row { background: #cfeede !important; }
#lzTableBody tr.leasing-paid-row:hover:not(.row-selected) > td { background-color: #c0ebd5 !important; }

/* ============================================================
   Z-24. АВТО ШТРАФЫ: ЗЕЛЁНЫЙ КАК В КАЛЕНДАРЕ, СТРОКИ РАЗДЕЛЕНЫ, «ДОП»
   БЕЗ РАМОК, ВСЕ ЯЧЕЙКИ - ТЕКСТОМ ДО 3 СТРОК (её правка 24.09.2026:
   «сделай такой же зелёный и строки раздели горизонтальными линиями, а
   это непонятное выделение столбика доп убери, и с вкладок соседних»;
   линии - вариант «1», как в календаре; «перенос до 3 строк на всех
   клетках строки»).
   ============================================================ */
/* Оплаченная строка - тот же мятный, что в календаре; под мышью гуще. */
#autoFinesModal tr.leasing-paid-row { background: #cfeede !important; }
#autoFinesModal tr.leasing-paid-row:hover:not(.row-selected) > td { background-color: #c0ebd5 !important; }
/* Строки разделены тонкой чёрной линией, как в платёжном календаре. */
#autoFinesModal .sheet-table tbody tr > td { border-bottom: 1px solid #000; }
/* «Доп» и другие списки - без рамки в покое (в покое их и не видно:
   вместо поля стоит текст, см. sheettable.js); рамка - только когда
   поле открыто для правки. */
#autoFinesModal select.autofine-editable { border-color: transparent !important; background: transparent; }
#autoFinesModal select.autofine-editable:focus { border-color: #9ccfdb !important; background: #fff; }
/* Списки, даты и суммы тоже показываются текстом, пока их не правят. */
.sheet-table tbody td.sheet-wrap-cell > select { display: none; }
.sheet-table tbody td.sheet-wrap-cell.sheet-wrap-editing > select { display: block; background: #ffffff; }
/* Пункт списка - одним словом, без разрыва посреди слова. */
.sheet-table tbody td.sheet-wrap-cell > .sheet-wrap-view.sheet-wrap-select { padding: 3px 4px; word-break: normal; overflow-wrap: normal; }

/* ============================================================
   Z-25. ЗАПРОСИ ДОКУМЕНТЫ (ТАБЛИЦА СВЕРКИ) ТИШЕ (её выбор 24.09.2026,
   вариант А: «что скажешь» по снимку «Запросы документы» → «а»).
   ============================================================ */
/* 1. Красный и жёлтый шарики статуса - маленький бледный кружок 10px.
   Значок в разметке остаётся (по нему работают фильтры и проверки), его
   только не видно: вместо него рисуется кружок. Подсказка - прежняя.
   Второй значок (свой статус контрагента) не трогаем. */
#resultsBody td.status-icon-cell.status-red > .status-icon:not(.status-icon-tag),
#resultsBody td.status-icon-cell.status-yellow > .status-icon:not(.status-icon-tag) {
    font-size: 0;
    display: inline-block;
    line-height: 0;
}
#resultsBody td.status-icon-cell.status-red > .status-icon:not(.status-icon-tag)::before,
#resultsBody td.status-icon-cell.status-yellow > .status-icon:not(.status-icon-tag)::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E08A84;
}
#resultsBody td.status-icon-cell.status-yellow > .status-icon:not(.status-icon-tag)::before { background: #E6C35C; }

/* 2. Поля «Действие», «Ответственный», «Комментарий» - без рамок в покое;
   рамка и подсказка «Комментарий…» - когда мышь на САМОЙ ячейке или поле
   в правке (как в календаре, Z-19). Выбранное значение видно всегда. */
#resultsBody td select,
#resultsBody td textarea.comment-input {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
#resultsBody td:hover select,
#resultsBody td select:focus,
#resultsBody td:hover textarea.comment-input,
#resultsBody td textarea.comment-input:focus {
    border-color: #9ccfdb !important;
    background: #fff !important;
}
#resultsBody td:not(:hover) textarea.comment-input:not(:focus)::placeholder { color: transparent; }

/* 3. Сумма - в одну строку; контрагент и организация - не уже 150px
   (реже переносятся на 2-3 строки). */
#resultsBody td[data-column="amount"] { white-space: nowrap; }
#resultsBody td[data-column="contractor"],
#resultsBody td[data-column="org"] { min-width: 150px; }

/* 4. Счётчики на вкладках сверки - бирюзовые, как в меню (Z-21).
   Красным остаётся только «⚠️ Организация не совпала» (класс is-alarm). */
.sverka-tab-count:not(.is-alarm) { background: #E0F2F6; color: #0B6B82; }

/* ============================================================
   Z-22. АРХИВ ДОКУМЕНТОВ: «ПЕРЕИМЕНОВАННЫЕ» (её выбор 24.09.2026).
   🗑 «Удалить из архива» - светло-красная квадратная кнопка, как 🗑 в
   календаре (Z-16). Кнопка «📎 Добавить файл» - общий .fp-btn (Z-09).
   ============================================================ */
#docArchiveModal .doc-archive-del {
    width: 28px; height: 28px; line-height: 1; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; border: 1.5px solid #E7AFA9; background: #FBE9E7;
    font-size: 14px; cursor: pointer;
}
#docArchiveModal .doc-archive-del:hover { border-color: #A3271F; }

/* ============================================================
   Z-27. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ: СКРЕПКА - КОНТУРОМ, А НЕ ПЯТНОМ (её правка
   25.09.2026: «сделай скрепку похожей на скрепку, а не на пятно»,
   выбор - «1»: наклонная контурная, серая; на ячейке под мышью -
   бирюзовая). Значок 📎 в разметке остаётся (прячется font-size: 0),
   вместо него рисуется контур (рисунок Feather Icons, лицензия MIT).
   ============================================================ */
#paymentTable .calendar-doc-cell .calendar-file-btn.is-attach { font-size: 0 !important; filter: none !important; opacity: 1 !important; }
#paymentTable .calendar-doc-cell .calendar-file-btn.is-attach::before {
    content: ''; display: block; width: 17px; height: 17px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237C9CA4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22/%3E%3C/svg%3E") center / contain no-repeat;
}
#paymentTable td:hover .calendar-doc-cell .calendar-file-btn.is-attach::before,
#paymentTable .calendar-doc-cell .calendar-file-btn.is-attach:focus-visible::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230B6B82%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22/%3E%3C/svg%3E");
}

/* ============================================================
   КАНБАН: СКРЕПКА «ЕСТЬ ЗАКРЫВАЮЩИЙ» - УТВЕРЖДЁННАЯ Z-27 (её правка
   21.10.2026: «скрепка в канбане выглядит как пятно, используй
   утверждённые значки»). Та же, что в платёжном календаре: наклонная
   контурная, серая; на карточке под мышью - бирюзовая. Значок 📎 в
   разметке остаётся (для подсказки и поиска), прячется font-size: 0.
   ============================================================ */
.inv-k-clip { font-size: 0 !important; display: inline-flex; align-items: center; vertical-align: middle; }
.inv-k-clip::before {
    content: ''; display: block; width: 16px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%237C9CA4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.kanban-column-body > *:hover .inv-k-clip::before,
.inv-k-clip:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%230B6B82%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-9.19%209.19a6%206%200%200%201-8.49-8.49l9.19-9.19a4%204%200%200%201%205.66%205.66l-9.2%209.19a2%202%200%200%201-2.83-2.83l8.49-8.48%22/%3E%3C/svg%3E");
}

/* ============================================================
   ПРАВКА 426. «✏️ ПЕРЕИМЕНОВАТЬ ФАЙЛЫ» - СТОЛБЦАМИ: Было | Новое имя | ⬇️ |
   📤 В бухгалтерию | 💾 Сохранить (её выбор по образцу
   obrazec_pereimenovat_buhgalteriya.html, 25.09.2026).
   ============================================================ */
#fileRenameModal .frn-head,
#fileRenameModal .frn-row {
    /* Раскладка К (её выбор 13.10.2026): ссылки под именем файла, «Новое имя»
       забирает всю ширину, фирма 140, галочки по 76, «📎 В заявку» 132. */
    display: grid; grid-template-columns: 150px 190px minmax(240px, 1fr) 38px 140px 76px 76px 150px;
    gap: 8px; align-items: center; font-size: 14px; color: #1a2634;
}
#fileRenameModal .frn-head { background: #e9eef3; font-weight: 600; padding: 6px 8px; border-radius: 6px 6px 0 0; }
#fileRenameModal .frn-head label { font-weight: 400; }
#fileRenameModal .frn-head:has(+ #fileRenameList:empty) { display: none; }
#fileRenameModal .frn-row { padding: 4px 8px; border-bottom: 1px solid #edf1f4; row-gap: 0; }
#fileRenameModal .frn-was { color: #1a2634; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fileRenameModal .frn-links { font-size: 14px; line-height: 1.2; margin-top: 2px; }
#fileRenameModal .frn-links a { color: #0B6B82; text-decoration: underline; margin-right: 8px; }
#fileRenameModal .frn-more:empty { display: none; }
/* «📎 В заявку»: суммы столбиком, правым краем; совпавшая с документом - тёмная; выбранная - с галочкой. */
#fileRenameModal .frn-inv { text-align: right; }
#fileRenameModal .frn-sum { display: block; padding: 1px 6px; border: 1px solid #0B6B82; border-radius: 4px; background: #fff; color: #0B4F5E;
    font-weight: 600; cursor: pointer; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.3; }
#fileRenameModal .frn-sum.best { background: #0B6B82; color: #fff; }
#fileRenameModal .frn-sum.sel { box-shadow: 0 0 0 2px #2bb3c0; }
#fileRenameModal .frn-sum small { font-weight: 400; opacity: .8; font-size: 14px; margin-left: 4px; }
#fileRenameModal .frn-sum + .frn-sum { margin-top: 2px; }
#fileRenameModal .frn-inv-none { color: #9aa7ad; cursor: pointer; display: block; text-align: center; }
#fileRenameModal .frn-inv-more { display: block; font-size: 14px; color: #0B6B82; cursor: pointer; text-decoration: underline; }
#fileRenameModal .frn-inv-sel { width: 100%; font-size: 14px; padding: 3px; box-sizing: border-box; }
#fileRenameModal .frn-inv-done { display: block; padding: 1px 6px; border: 1px solid #2a9d5c; border-radius: 4px; background: #eafaf1; color: #1d7240; font-weight: 600; white-space: nowrap; }
#fileRenameModal .frn-inv-note { font-size: 14px; color: #1d7240; margin-top: 4px; }
#fileRenameModal .frn-inv-note a { color: #0B6B82; }
/* «открыть файл»: документ под строкой, в полэкрана, поле с именем - над ним. */
#fileRenameModal .frn-preview { margin: 4px 0 6px; border: 1px solid #c9dde2; background: #f7f9fa; }
#fileRenameModal .frn-preview-bar { height: 26px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #e9eef3; font-size: 14px; color: #425264; }
#fileRenameModal .frn-preview-bar a { color: #0B6B82; }
#fileRenameModal .frn-preview-frame { display: block; width: 100%; height: 50vh; border: 0; background: #fff; }
#fileRenameModal .frn-preview-img { max-height: 50vh; overflow: auto; text-align: center; }
#fileRenameModal .frn-preview-img img { max-width: 100%; }
#fileRenameModal .frn-preview-txt { padding: 8px 10px; font-size: 14px; }
#fileRenameModal .frn-preview-txt pre { white-space: pre-wrap; max-height: 40vh; overflow: auto; font-size: 14px; }
#frnPlanModal .frn-plan { font-size: 14px; color: #1a2634; }
#frnPlanModal .frn-plan-h { font-weight: 600; margin-top: 10px; }
#frnPlanModal .frn-plan ul { margin: 4px 0 2px 20px; padding: 0; }
#frnPlanModal .frn-plan li { margin: 2px 0; }
#frnPlanModal .frn-plan-note { font-size: 14px; color: #5b6b7c; margin-bottom: 6px; }
#frnPlanModal .frn-plan-org { color: #0B6B82; }
#frnPlanModal .frn-send-btn { background: #0B6B82; border-color: #0B6B82; color: #fff; }
#fileRenameModal .frn-wait { grid-column: 2 / -1; }
#fileRenameModal .frn-more { grid-column: 1 / -1; }
#fileRenameModal .frn-c { text-align: center; }
#fileRenameModal .frn-name, #fileRenameModal .frn-contr { width: 100%; box-sizing: border-box; padding: 5px; font-size: 14px; }
#fileRenameModal .frn-dl { padding: 5px 10px; font-size: 14px; text-decoration: none; }
#fileRenameModal .frn-done { color: #1f7a4d; }
#fileRenameModal .frn-send-btn { background: #0B6B82; border-color: #0B6B82; color: #fff; }
#fileRenameModal .frn-send-btn:disabled { opacity: .5; cursor: default; }
/* Правка 428: фирма у файла и окно письма по фирмам. */
#fileRenameModal .frn-org { width: 100%; font-size: 14px; padding: 4px; }
#fileRenameModal .frn-org.frn-org-need { border: 1px solid #e67e22; }
/* Правка 429: нераспознанные файлы - строка над списком и метка у строки. */
#fileRenameModal .frn-unrec-box { background: #FFF4E5; border: 1px solid #F0C27B; border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 14px; color: #7a4a00; }
#fileRenameModal .frn-row.frn-unrec .frn-was { color: #b35c00; font-weight: 600; }
#frnLetterModal .frn-send-btn { background: #0B6B82; border-color: #0B6B82; color: #fff; }
#frnLetterModal .frn-send-btn:disabled { opacity: .5; cursor: default; }
#frnLetterModal .frn-letter-from { font-size: 14px; color: #1a2634; margin-bottom: 6px; }
#frnLetterModal .frn-letter { border: 1px solid #9FD3DD; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #F7FCFD; }
#frnLetterModal .frn-letter-org { display: inline-block; background: #E0F2F6; color: #0B6B82; border-radius: 9px; padding: 0 8px; font-size: 14px; }
#frnLetterModal .frn-letter-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: start; font-size: 14px; margin-top: 6px; }
#frnLetterModal .frn-letter-row input, #frnLetterModal .frn-letter-row textarea {
    font: 14px "Segoe UI", Arial, sans-serif; padding: 5px; border: 1px solid #c9d3dc; border-radius: 5px; width: 100%; box-sizing: border-box;
}
#frnLetterModal .frn-letter-files { font-size: 14px; color: #1a2634; margin-top: 6px; }

/* ============================================================
   ПРАВКА 438. АРХИВ ДОКУМЕНТОВ: разделы - вкладками (обычные .tabs/.tab-btn,
   как везде), внутри - по нашим фирмам и контрагентам, файл - одна строка.
   ============================================================ */
#docArchiveModal .doc-archive-tabs { flex-wrap: wrap; margin-top: 10px; }
#docArchiveModal .doc-archive-src { margin-top: 8px; border: 1px solid #e0e6ea; border-radius: 8px; overflow: hidden; }
#docArchiveModal .doc-archive-src-head { background: #f4f7fa; padding: 6px 12px; font-size: 14px; }
#docArchiveModal .doc-archive-firm > td { background: #e9f4f7; font-weight: 600; color: #0B4F5E; padding: 6px 10px; }
#docArchiveModal .doc-archive-kontr > td { font-weight: 600; color: #0B4F5E; padding: 5px 10px 5px 26px; background: #fbfdfe; }
#docArchiveModal .doc-archive-name { padding-left: 40px; }
#docArchiveModal .doc-archive-ib { display: inline-block; border: 1px solid #9FD3DD; background: #fff; border-radius: 5px;
    padding: 1px 6px; font-size: 14px; text-decoration: none; }
#docArchiveModal .doc-archive-ib:hover { border-color: #3AA7BD; background: #F3FAFB; }
/* Галка › вместо плюсика у файла (её выбор 12.10.2026, вариант А образца):
   серая, закрыто - вправо, открыто - вниз. */
#docArchiveModal .doc-archive-chev { cursor: pointer; color: #5a6f78; min-width: 28px; text-align: center; }
#docArchiveModal .doc-archive-chev > span { display: inline-block; transition: transform .15s; }
#docArchiveModal .doc-archive-chev.is-open > span { transform: rotate(90deg); }

/* ============================================================
   ПРАВКА 440. ЗАДАЧИ В ПРОЕКТАХ И ЗАДАЧА ИЗ ПЕРЕПИСКИ (образец
   obrazec_zadachi_proekty.html, её «делай» 25.09.2026).
   ============================================================ */
.task-side .task-project { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #425264;
    border-top: 1px solid #e6ecf3; padding-top: 10px; }
.task-project > span:first-child { display: flex; align-items: center; gap: 7px; color: #1a2538; }
/* Окно задачи, открытое из выдвижного чата, - над ним (чат 1200). */
.modal.modal-nad-chatom { z-index: 1250; }
/* «📌 в задачу» - видна у сообщения под мышью, как реакции. */
.chat-msg .chat-to-task { display: none; margin-top: 4px; border: 1px solid #9FD3DD; background: #fff; color: #0B6B82;
    border-radius: 12px; padding: 1px 10px; font-size: 14px; cursor: pointer; }
.chat-msg:hover .chat-to-task, .chat-msg .chat-to-task:focus-visible { display: inline-block; }
.chat-msg .chat-to-task:hover { border-color: #3AA7BD; background: #F3FAFB; }
.chat-msg .chat-task-mark { display: inline-block; margin-top: 4px; font-size: 14px; color: #0B6B82; text-decoration: none; }
.chat-msg .chat-task-mark:hover { text-decoration: underline; }

/* ПОЧТА (правка 445, образец obrazec_pochta.html). Слева письма, справа
   открытое письмо; оба поля до низа экрана (fit-bottom). */
.mail-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mail-toolbar .mail-account { font-size: 14px; font-weight: 600; color: #0B6B82; }
.mail-toolbar .mail-search { flex: 1; min-width: 220px; margin: 0; }
/* «⏳ проверяю новые…» - пока почта отвечает, видны письма с прошлого раза (22.10.2026). */
.mail-toolbar .mail-obnovlyayu { font-size: 14px; color: #5a6472; white-space: nowrap; }
.mail-grid { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 12px; font-size: 14px; }
.mail-list, .mail-view { border: 1px solid #e0e6ea; border-radius: 8px; overflow-y: auto; background: #fff; }
.mail-view { padding: 10px 14px; }
.mail-item { padding: 8px 10px; border-bottom: 1px solid #edf1f4; cursor: pointer; }
.mail-item.selected { background: #E0F2F6; }
.mail-item.unread .mail-subj { font-weight: 700; }
.mail-item .mail-from { font-weight: 600; color: #0B6B82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item .mail-date { float: right; color: #7c8899; margin-left: 8px; }
.mail-item .mail-subj { margin-top: 2px; color: #1a2634; }
.mail-marks { margin-top: 3px; }
.mail-mark { display: inline-block; font-size: 14px; border: 1px solid #9FD3DD; background: #fff; border-radius: 12px;
    padding: 0 8px; color: #0B6B82; }
.mail-mark-task { cursor: pointer; }
.mail-mark-task:hover { border-color: #3AA7BD; background: #F3FAFB; }
.mail-mark-task.is-done { color: #5b6b7c; }
.mail-more { display: block; margin: 8px auto; }
.mail-empty { padding: 20px; color: #5b6b7c; text-align: center; }
.mail-view-from { font-size: 15px; font-weight: 600; color: #0B6B82; }
.mail-view-meta { color: #5b6b7c; margin-top: 2px; }
.mail-view-subj { font-size: 16px; font-weight: 600; margin-top: 6px; color: #1a2634; }
.mail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mail-view-marks { margin-bottom: 6px; }
.mail-view-text { white-space: pre-wrap; word-break: break-word; margin: 10px 0; color: #1a2634; line-height: 1.5; }
.mail-att { display: flex; gap: 8px; align-items: center; border: 1px solid #e0e6ea; border-radius: 6px; padding: 5px 8px; margin: 4px 0; }
.mail-att .mail-att-name { flex: 1; color: #0B6B82; }
.mail-att .mail-att-size { color: #7c8899; }
.mail-reply { border: 1px solid #9FD3DD; border-radius: 8px; background: #F3FAFB; padding: 8px 10px; margin: 6px 0; }
.mail-reply textarea { width: 100%; box-sizing: border-box; font: 14px "Segoe UI", Arial, sans-serif; margin-top: 6px; padding: 6px; }
.mail-reply-to, .mail-reply-note, .mail-reply-all { font-size: 14px; color: #5b6b7c; }
.mail-reply-all { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.mail-set { display: flex; flex-direction: column; gap: 8px; max-width: 720px; margin-top: 10px; font-size: 14px; }
.mail-set-row { display: grid; grid-template-columns: 200px 1fr; gap: 10px; align-items: center; }
.mail-set-row input[type=text], .mail-set-row input[type=email], .mail-set-row input[type=password],
.mail-set-row input[type=number], .mail-set-row textarea { font: 14px "Segoe UI", Arial, sans-serif; padding: 5px;
    border: 1px solid #c9d3dc; border-radius: 5px; width: 100%; box-sizing: border-box; }
.mail-set-servers summary { cursor: pointer; color: #0B6B82; margin: 4px 0 8px; }
.mail-set-servers .mail-set-row { margin-bottom: 8px; }
.mail-set-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
/* Правка 448: строка «Контрагент: …» у письма и отбор «переписка с …». */
.mail-contr { margin-top: 6px; padding: 5px 10px; background: #F3FAFB; border-left: 3px solid #3AA7BD; border-radius: 4px; color: #1a2634; }
.mail-contr a { color: #0B6B82; }
.mail-contr-how { color: #5b6b7c; }
.mail-contr-none { border-left-color: #c9d3dc; color: #5b6b7c; }
.mail-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; border: 1px solid #9FD3DD; background: #E0F2F6;
    color: #0B6B82; border-radius: 14px; padding: 3px 4px 3px 10px; }
/* Правка 452: утренняя сводка над письмами. */
.mail-summary:empty { display: none; }
.mail-summary { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #F3FAFB; border: 1px solid #9FD3DD;
    border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; color: #1a2634; }
.mail-summary-title { cursor: pointer; }
.mail-summary-chip { font: 14px "Segoe UI", Arial, sans-serif; border: 1px solid #9FD3DD; background: #fff; border-radius: 14px;
    padding: 2px 10px; color: #0B6B82; cursor: pointer; }
.mail-summary-chip b { color: #1a2634; }
.mail-summary-chip:hover:not(:disabled) { border-color: #3AA7BD; background: #E0F2F6; }
.mail-summary-chip.is-zero { opacity: .55; cursor: default; }
.mail-summary-note { color: #5b6b7c; }
/* Правка 451: правила разбора - жёлтая метка «⚡», полоска в письме, окно правил. */
.mail-mark-rule { background: #FFF7E0; border-color: #F0C75E; color: #7a5a00; }
.mail-mark-dismissed { background: #eef1f4; border-color: #c9d1d9; color: #5b6b7c; }   /* «🗄 архив почты» (её «а» 05.10.2026) */
.mail-rulebar { background: #FFF7E0; border-left: 3px solid #F0C75E; padding: 6px 10px; border-radius: 4px; margin: 8px 0;
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: #1a2634; }
.mail-rulebar-note { color: #5b6b7c; }
.mail-rules-title { font-size: 16px; color: #0B4F5E; }
.mail-rules-wrap { overflow: auto; }
.mail-rules { border-collapse: collapse; width: 100%; font-size: 14px; background: #fff; }
.mail-rules th { background: #e9eef3; text-align: left; padding: 6px 8px; }
.mail-rules td { padding: 6px 8px; border-bottom: 1px solid #edf1f4; vertical-align: middle; }
.mail-rules input[type=text], .mail-rules select { font: 14px "Segoe UI", Arial, sans-serif; padding: 4px 6px;
    border: 1px solid #c9d3dc; border-radius: 5px; width: 100%; box-sizing: border-box; }
.mail-rules .mail-rule-c { text-align: center; width: 44px; }
.mail-reply-remind input[type=number] { width: 56px; font: 14px "Segoe UI", Arial, sans-serif; padding: 2px 4px; }
.mail-chip-x { border: none; background: none; cursor: pointer; font-size: 14px; color: #0B6B82; padding: 0 6px; }
@media (max-width: 800px) { .mail-grid { grid-template-columns: 1fr; } .mail-set-row { grid-template-columns: 1fr; } }

/* ============================================================
   Z-28. ЛИЧНЫЙ КАБИНЕТ «КАК В БИТРИКС24» (её выбор 26.09.2026,
   вариант Б). Белые карточки на фоне программы: слева фото кругом,
   справа «Контактная информация» и «В программе», поля - подпись
   мелко серым над значением, в два столбца.
   ============================================================ */
#profileModal .modal-content { max-width: 1100px !important; }
#profileEditSection { max-width: 720px; }
/* Левая карточка (фото) - во всю высоту правого столбца: низ ровно с «В
   программе», один прямоугольник (её правка 20.10.2026: «вытяни фото, чтобы
   ровно встало с основным блоком»). Фото, имя и кнопка - по середине высоты. */
.pf-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: stretch; }
.pf-right { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(11, 79, 94, 0.08); padding: 20px 24px; }
.pf-left { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.pf-ava { width: 220px; height: 220px; margin: 8px auto 10px; border-radius: 50%; overflow: hidden; background: #D5DDE0; }
.pf-ava img { width: 100%; height: 100%; object-fit: cover; }
.pf-ava-ph { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pf-ava-ph svg { width: 150px; height: 170px; fill: #fff; }
.pf-who { font-size: 20px; font-weight: 600; color: #0B4F5E; margin-top: 10px; }
.pf-pos { font-size: 15px; color: #7C9CA4; margin-top: 2px; min-height: 18px; }
.pf-btnrow { margin-top: 16px; display: flex; justify-content: center; }
.pf-ttl {
    font-size: 20px; color: #0B4F5E; font-weight: 500;
    padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid #E3EEF1;
    display: flex; justify-content: space-between; align-items: baseline;
}
.pf-ttl a { font-size: 14px; color: #7C9CA4; text-decoration: none; font-weight: 400; }
.pf-ttl a:hover { color: #0B6B82; }
.pf-fields { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.pf-lbl { font-size: 14px; color: #8A9EA4; margin-top: 12px; }
.pf-val { font-size: 17px; color: #17212f; margin-top: 2px; overflow-wrap: anywhere; }
.pf-val a { color: #0B6B82; text-decoration: none; }
@media (max-width: 900px) {
    .pf-grid { grid-template-columns: 1fr; }
    .pf-fields { grid-template-columns: 1fr; }
}

/* ============================================================
   Z-29. СОТРУДНИКИ «КАК В БИТРИКС24» (её выбор 26.09.2026, вариант А):
   заголовок и поиск над белой таблицей; фото кругом, имя ссылкой,
   должность под ним. Карточка сотрудника - классы pf-* из Z-28.
   ============================================================ */
#employeesModal .modal-content { max-width: 1240px; }
.emp-top { display: flex; gap: 12px; align-items: center; margin: 4px 0 14px; flex-wrap: wrap; }
.emp-top h3 { margin: 0; font-size: 24px; font-weight: 600; color: #0B4F5E; }
.emp-search { flex: 1; min-width: 220px; max-width: 420px; padding: 8px 12px; border: 1px solid #9FD3DD; border-radius: 8px; font-size: 15px; background: #fff; }
.emp-count { color: #5E7F87; font-size: 15px; }
.emp-card { background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(11, 79, 94, 0.08); overflow: hidden; }
#employeesBody table.emp-table { width: 100%; border-collapse: collapse; margin: 0; }
#employeesBody table.emp-table th { text-align: left; font-weight: 400; color: #5E7F87; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid #E3EEF1; background: #fff; text-transform: none; letter-spacing: 0; }
#employeesBody table.emp-table td { padding: 12px 16px; border-bottom: 1px solid #E3EEF1; font-size: 15px; color: #17212f; vertical-align: middle; }
#employeesBody table.emp-table tbody tr:last-child td { border-bottom: none; }
#employeesBody table.emp-table a { color: #0B6B82; text-decoration: none; }
.emp-who { display: flex; gap: 12px; align-items: center; }
.emp-name { color: #0B6B82; font-size: 16px; }
.emp-pos { color: #7C9CA4; font-size: 14px; margin-top: 2px; }
.emp-bd { display: inline-block; padding: 1px 8px; border-radius: 10px; background: #FFF4D6; color: #8A6400; font-size: 14px; }
.emp-empty { text-align: center; color: #7C9CA4; padding: 24px !important; }
.emp-ava { border-radius: 50%; background: #D5DDE0; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex: none; }
.emp-ava svg { width: 68%; height: 77%; fill: #fff; }
.pf-ava .emp-ava { width: 100% !important; height: 100% !important; }
.pf-ava img { width: 100% !important; height: 100% !important; }
.pf-val a { color: #0B6B82; text-decoration: none; }

/* ============================================================
   Z-55. ПЕРЕВОД ФИЗ ЛИЦ: ВЕРХ ОКНА БЕЗ НАДПИСЕЙ (её правка 29.09.2026:
   «все надписи - в подсказку»). Разметка - index.html (.it-top),
   filetools.js (_itRenderArchiveTools). Стоит до Z-31 (там запрещён
   tr:hover - здесь его нет, но держим блоки окон вместе).
   ============================================================ */
#individualTransferModal .it-top {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
}
#individualTransferModal .it-archive-tools {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
#individualTransferModal .it-archive-tools.hidden { display: none; }
#individualTransferModal .it-archive-tools .search-box { width: 240px; max-width: 240px; margin: 0; height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
#individualTransferModal .it-chip { padding: 6px 12px; font-size: 14px; color: #0B4F5E; }
#individualTransferModal .it-chip b { color: #0B4F5E; }
#individualTransferModal .it-excl-wrap { position: relative; display: inline-block; }
#individualTransferModal .it-excl-drop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    background: #fff; border: 1px solid #9FD3DD; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(11, 79, 94, .15); padding: 8px 10px; min-width: 260px; max-width: 480px;
    max-height: 320px; overflow: auto;
}
#individualTransferModal .it-excl-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 0; }
#individualTransferModal .it-excl-all { text-align: right; margin-top: 6px; }

/* ============================================================
   Z-56. ОБУЧЕНИЕ: ВОПРОС ПО СТРОКАМ, КОММЕНТАРИИ К ВАРИАНТАМ, ИТОГИ,
   «ТАК УВИДИТ СОТРУДНИК» ВКЛАДКАМИ (её решения 29.09.2026: «1а», «2б»,
   «тест только в конце», общее «Пояснение» убрать - «а»). Разметка -
   training.js (trainingQuestionForm, trainingRenderQOptions,
   trainingResultItemHtml, trainingRenderPreview).
   ============================================================ */
.tr-q-form .tr-q-label { display: block; margin: 12px 0 4px; font-weight: 600; color: #0B4F5E; }
.tr-q-form .tr-q-muted { font-weight: 400; color: #7A8A96; }
.tr-q-opt {
    display: flex; align-items: center; gap: 8px; margin: 6px 0 4px;
    padding: 4px 6px; border-radius: 6px; border: 1px solid transparent;
}
.tr-q-opt.is-ok { background: #E3F5EA; border-color: #9ED9B4; }
.tr-q-mark { display: inline-flex; align-items: center; gap: 5px; min-width: 96px; white-space: nowrap; color: #425264; cursor: pointer; }
.tr-q-opt.is-ok .tr-q-mark { color: #1A8348; font-weight: 600; }
.tr-q-opt .tr-q-text { flex: 1; padding: 6px 8px; }
.tr-q-comment {
    display: block; box-sizing: border-box; margin: 0 0 8px 112px; width: calc(100% - 150px);
    padding: 5px 8px; border: 1px dashed #9FD3DD; border-radius: 6px; color: #425264; font-size: 14px;
}
.tr-q-add { display: inline-block; margin-top: 4px; color: #0B6B82; cursor: pointer; }
/* Итоги теста */
.tr-res-item { border-top: 1px solid #ecf0f1; padding: 8px 0; }
.tr-res-q { font-weight: 600; }
.tr-res-opt { margin: 5px 0 0; padding: 5px 8px; border-radius: 6px; border: 1px solid #E3EEF1; }
.tr-res-opt.is-picked-ok { background: #E3F5EA; border-color: #9ED9B4; }
.tr-res-opt.is-picked-bad { background: #FBE3E3; border-color: #EFB1B1; }
.tr-res-opt.is-correct { border: 1px dashed #1A8348; }
.tr-res-note { color: #7A8A96; }
.tr-res-comment { margin: 4px 0 0; padding: 6px 10px; border-radius: 6px; border-left: 4px solid #1A8348; background: #E3F5EA; }
.tr-res-comment.is-bad { border-left-color: #C9403F; background: #FBE3E3; }
/* «Так увидит сотрудник» - вкладки */
.tr-pv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }

/* ============================================================
   Z-57. ЗАДАЧИ / НАПОМИНАНИЕ: ДНИ ПОВТОРА КНОПКАМИ (её правка 29.09.2026,
   вариант «а»). Разметка - tasks.js (_repeatDaySelectHtml). Выбранный
   день - тёмная бирюза, как выбранная вкладка.
   ============================================================ */
.task-rdays { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.task-rdays-month { flex-direction: column; align-items: flex-start; }
.task-rgrid { display: grid; grid-template-columns: repeat(7, 38px); gap: 5px; }
.task-rdays-row { display: flex; gap: 6px; flex-wrap: wrap; }
.task-rday {
    min-width: 38px; height: 32px; padding: 0 6px; font-size: 14px; cursor: pointer;
    border: 1px solid #9FD3DD; border-radius: 8px; background: #fff; color: #0B4F5E;
}
.task-rday:hover { border-color: #0B6B82; }
.task-rday.on { background: #0B6B82; border-color: #0B6B82; color: #fff; font-weight: 600; }
.task-rday-wide { padding: 0 10px; }
.task-rday-q {
    height: 30px; padding: 0 10px; font-size: 14px; cursor: pointer;
    border: 1px dashed #9FD3DD; border-radius: 8px; background: #fff; color: #0B6B82;
}
.task-rsum { display: block; margin-top: 6px; color: #1A8348; font-size: 14px; }

/* ============================================================
   Z-58. ПЛАТЁЖНЫЙ КАЛЕНДАРЬ: «№» ВМЕСТО «МЕСЯЦА» И ИТОГ ЗАПОЛНЕНИЯ
   МЕСЯЦА (её правка 29.09.2026, выбор «1а 2а»). Разметка - calendar.js
   (_calNumberCell, showCalFillResult).
   ============================================================ */
#paymentTable td.cal-num-cell { text-align: center; color: #0B4F5E; }
#paymentTable .cal-num.is-last { font-weight: 700; color: #0B6B82; }
.cal-fill-box { max-width: 600px; }
.cal-fill-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.cal-fill-table th { text-align: right; color: #0B4F5E; padding: 6px 8px; border-bottom: 2px solid #0B6B82; }
.cal-fill-table th:first-child { text-align: left; }
.cal-fill-table th { text-transform: none; letter-spacing: 0; font-size: 14px; }
.cal-fill-table th span { font-weight: 400; color: #7A8A96; }
.cal-fill-diff.is-quiet { color: #7A8A96; }
.cal-fill-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid #E3EEF1; }
.cal-fill-table td:first-child { text-align: left; }
.cal-fill-table tr.is-total td { font-weight: 700; }
.cal-fill-diff.is-down, .cal-fill-note.is-down { color: #C9403F; }
.cal-fill-diff.is-up { color: #1A8348; }
.cal-fill-diff.is-down, .cal-fill-diff.is-up { font-weight: 600; }
.cal-fill-note { font-size: 14px; color: #425264; margin-top: 6px; text-align: left; }

/* ============================================================
   Z-31. МЕТКИ «1×» / «≈» - ТИХИЕ В ПОКОЕ (её правка 26.09.2026:
   «сделай, чтобы эта плашка со знаком „примерно“ была выделена только при
   наведении, как и всё остальное, сейчас она горит постоянно; при
   наведении на ячейку, а не на строку»). Поставленная метка видна всегда,
   но без плашки - серым знаком; плашка (светлая бирюза с рамкой) - только
   когда мышь на ячейке «Метки» или метка в фокусе клавиатуры.
   ============================================================ */
#paymentTable .cal-mark.on { border-color: transparent; background: transparent; color: #7C9CA4; }
#paymentTable td.cal-marks-cell:hover .cal-mark.on,
#paymentTable .cal-mark.on:focus-visible { border-color: #9FD3DD; background: #E6F5F8; color: #0B4F5E; }
#paymentTable td.cal-marks-cell:hover .cal-mark.on:hover { border-color: #3AA7BD; }

/* ============================================================
   Z-33. ЧЁТКИЙ БЕЛЫЙ ТЕКСТ НА ЗЕЛЁНЫХ/КРАСНЫХ КНОПКАХ (её правка
   26.09.2026: «поменяй чёткость», из сравнения выбрала «3» - «б» на
   цветах новой сборки). Цвета доски - прежние --ok-soft #1A8348 /
   --bad-soft #C9403F, не меняются. Текст белый жирный с чёткой тенью
   1px снизу без размытия; отступы по бокам 6px, чтобы «Согласовать»
   помещалось на узкой карточке целиком. «✓ Готово» в Задачнике - тот
   же зелёный, что на доске. Значки ✅/❌ на этих кнопках заменены
   белыми ✓/✕ (invoices.js, tasks.js).
   ============================================================ */
.kanban-decision .btn-decision-yes,
.kanban-decision .btn-decision-no,
.task-done-btn {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .30);
    padding-left: 6px;
    padding-right: 6px;
}
.task-done-btn { background: var(--ok-soft); }

/* ============================================================
   Z-34. ДОГОВОРЫ: СТРОКИ РАЗДЕЛЕНЫ ТЁМНОЙ БИРЮЗОЙ, ЛЕГЧЕ ЧИТАТЬ (её
   правка 26.09.2026: «раздели строки тёмно-бирюзовой линией… что ещё
   предложишь для лёгкой читаемости?», выбрала вариант «г»).
   Между строками - 1px #0B6B82, под шапкой - 2px #0B6B82; строки чуть
   выше (8px сверху/снизу); контрагент и сумма жирнее, контрагент -
   тёмной бирюзой; № договора и дата - серее; «Платежей», «В календаре»,
   «Файл» - по центру (у ячеек inline text-align, поэтому !important).
   Значок-листок перед контрагентом убран (contracts.js).
   Столбцы: 1 Контрагент, 2 О чём, 3 Наша фирма, 4 №, 5 Дата, 6 Сумма,
   7 Платежей, 8 В календаре, 9 Файл (CONTRACT_COLUMNS).
   ============================================================ */
#contractsModal .contracts-table thead th { border-bottom: 2px solid #0B6B82; }
#contractsModal .contracts-table tbody tr.contract-row > td {
    border-bottom: 1px solid #0B6B82;
    padding-top: 8px;
    padding-bottom: 8px;
    vertical-align: middle;
}
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(1) { font-weight: 600; color: #0B4F5E; }
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(4),
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(5) { color: #48636B; font-variant-numeric: tabular-nums; }
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(6) { font-weight: 600; font-variant-numeric: tabular-nums; }
#contractsModal .contracts-table thead th:nth-child(7),
#contractsModal .contracts-table thead th:nth-child(8),
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(7),
#contractsModal .contracts-table tbody tr.contract-row > td:nth-child(8) { text-align: center !important; }

/* ============================================================
   Z-35. ДОЛГИ ПО ЗАКРЫВАЮЩИМ: СВЕТЛЫЕ ПОЛОСЫ СОТРУДНИКОВ (её правка
   26.09.2026: «слишком тёмные поля и слишком на них жирный текст»,
   выбрала вариант «а»). Полоса - светлая бирюза #E0F2F6 с рамкой
   1px #9FD3DD, под мышью #D2ECF2; текст тёмно-бирюзовый #0B4F5E,
   средней жирности (500), 15px; кружок +/− - белый с рамкой.
   Прежние правила .debts-person-head (правка 182) не удалены - на них
   смотрит test_dolgi_cvet_polos.js; этот блок стоит ниже и перебивает.
   ============================================================ */
#debtsModal .debts-person-head {
    background: #E0F2F6;
    color: #0B4F5E;
    font-weight: 500;
    font-size: 15px;
    border: 1px solid #9FD3DD;
}
#debtsModal .debts-person-head:hover { background: #D2ECF2; }
#debtsModal .debts-person-head .debts-person-toggle {
    background: #fff;
    border: 1px solid #9FD3DD;
    color: #0B6B82;
}

/* ============================================================
   Z-36. СТРОКИ-СПИСКИ ПОД МЫШЬЮ - ТЕМ ЖЕ ЦВЕТОМ, ЧТО ТАБЛИЦЫ (её правка
   27.09.2026: «посмотри кнопку результаты сверки и пройдись по
   вкладкам… я же просила везде одинаковый»; «да делай как везде»).
   В «Результатах сверки» вкладки «Чек-лист», «Акт-лист», «Аванс-лист»
   и «Организация не совпала» собраны не таблицей, а строками
   .list-item - у них была своя старая подсветка #c2f2e8 (мятная).
   Списки «Составные суммы» (.composite-item) и «Ручная проверка
   статей» (.manual-review-item) подсвечивались #e3f4f7. Теперь у всех -
   тот же светло-бирюзовый, что у белых строк таблиц:
   var(--row-hover-soft) = #eaf7f9 (в темах - цвет темы).
   Архивная строка под мышью по-прежнему не подсвечивается; строка,
   выделенная щелчком (row-selected), - рамка, как была.
   ============================================================ */
.list-item:hover:not(.archived-item),
.composite-item:hover,
.manual-review-item:hover {
    background: var(--row-hover-soft, #eaf7f9) !important;
}

/* ============================================================
   Z-37. СОТРУДНИКИ ВНЕ ШТАТА: СПОКОЙНЕЕ (её правка 27.09.2026: «что
   предложишь?», выбрала вариант «б»).
   - Разделы («Акт — 13», «Чек — 12») - светлая полоса, как в «Долгах по
     закрывающим» (Z-35), а не тёмная #2c3e50; под мышью не меняется
     (раньше тёмная полоса под мышью светлела - ошибка): правило с id
     окна сильнее общего правила подсветки, отдельный :hover не нужен
     (test_theme.js запрещает hex-фон в правилах tr:hover).
   - Столбец «Договор» убран (Z-44), долг по закрывающим стал 6-м.
   - Долг по закрывающим (6-й) - без плашки: тёплый коричневый текст
     #9A5B00, сумма жирная (<b> в freelancers.js); «долгов нет» - серым.
   - Столбец со стрелкой (последний) - вместо чёрного ▼/▲ тонкая серая
     галочка (рисуется рамкой; символ в разметке остаётся, но прозрачный),
     на ячейке под мышью - бирюзовая; у раскрытой строки смотрит вверх.
   ============================================================ */
#freelancersModal .freelancers-table tr.freelancers-section > td {
    background: #E0F2F6 !important;
    color: #0B4F5E !important;
    font-weight: 600;
    font-size: 15px;
    border-top: 1px solid #9FD3DD;
    border-bottom: 1px solid #9FD3DD;
}
#freelancersModal .freelancers-table tr.freelancer-row > td:nth-child(6) .letter-incomplete {
    background: transparent;
    border: none;
    padding: 0;
    color: #9A5B00;
}
#freelancersModal .freelancers-table tr.freelancer-row > td:nth-child(6) .contract-payments { color: #7C9CA4; }
/* Её правка 15.10.2026: столбец со стрелкой убран; строка выделяется
   щелчком общей рамкой (без заливки), долг - синей ссылкой, она открывает карточку. */
#freelancersModal .freelancers-table tr.freelancer-row { cursor: default; }
/* Строки повыше (её правка 15.10.2026: «слишком узкие»): было ~28px, стало ~38px. */
#freelancersModal .freelancers-table tr.freelancer-row > td { padding-top: 9px; padding-bottom: 9px; }
#freelancersModal .freelancers-table tr.freelancer-row > td:nth-child(6) a.fl-debt-link { color: #0B6B82; text-decoration: underline; cursor: pointer; }
#freelancersModal .freelancers-table tr.freelancer-row > td:nth-child(6) a.fl-debt-link:hover { color: #0B4F5E; }

/* ============================================================
   Z-38. КАРТОЧКА СОТРУДНИКА ВНЕ ШТАТА - ОТДЕЛЬНЫМ ОКНОМ (её правка
   27.09.2026: «смотри как неудобно и непонятно открывается окно»; выбор
   «б, но окно пусть открывается отдельно и закрывается крестиком, чтобы
   лишняя инфо не маячила»).
   Строка карточки (tr.freelancer-card-row) остаётся в таблице - логика
   открытия не меняется, - но её ячейка встаёт поверх всего экрана
   затемнением, а сама карточка - белым окном по центру: шапка с именем и
   крестиком, ниже две колонки - «Данные сотрудника» слева, «Долги по
   закрывающим» справа. Нет сверки/долгов - одна колонка.
   Ячейку НЕ делаем flex/grid (test_theme.js: ячейка должна оставаться
   ячейкой) - окно по центру ставится отступами.
   ============================================================ */
#freelancersModal .freelancers-table tr.freelancer-card-row > td {
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: 5vh 24px !important;
    overflow: auto;
    background: rgba(11, 79, 94, 0.35) !important;
    border: none !important;
}
#freelancersModal .fl-card {
    width: min(1200px, 96vw);
    margin: 0 auto;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 12px;
    border-top: none;
    padding: 0 22px 20px;
    box-shadow: 0 12px 40px rgba(11, 79, 94, 0.25);
}
#freelancersModal .fl-card-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    padding: 14px 0 10px;
    margin-bottom: 6px;
    border-bottom: 2px solid #0B6B82;
}
#freelancersModal .fl-card-title { font-size: 18px; font-weight: 600; color: #0B4F5E; }
#freelancersModal .fl-card-cols {
    display: grid;
    grid-template-columns: minmax(360px, 40%) 1fr;
    gap: 24px;
    align-items: start;
}
#freelancersModal .fl-card-cols.one { grid-template-columns: 1fr; }
#freelancersModal .fl-card-left .contract-fields { grid-template-columns: 1fr 1fr; }
#freelancersModal .fl-card-right .data-table td:nth-child(1),
#freelancersModal .fl-card-right .data-table td:nth-child(2) { white-space: nowrap; }
#freelancersModal .fl-card-sec {
    font-size: 15px;
    font-weight: 600;
    color: #0B4F5E;
    margin: 10px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #E3EEF1;
}

/* ============================================================
   Z-39. ПРОЕКТЫ → КАРТОЧКА: СВОДКА ВМЕСТО «ВСЁ В КУЧУ» (её правка
   27.09.2026: «что предложишь? вообще всё в кучу свалилось», выбрала
   «б»). Сверху четыре плитки (стоимость, затраты по смете, стоп-цена,
   предел затрат), ниже плашка с одной таблицей «смета / план / факт»,
   ещё ниже плашка с полями ввода. Разметка - projects.js
   (_renderProjectMarginBlock, _renderProjectTargetInput).
   ============================================================ */
#projectsModal #projectMarginBlock { margin-top: 4px; }
#projectsModal .prj-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
#projectsModal .prj-tile {
    background: #fff;
    border: 1px solid #DCE7EA;
    border-radius: 10px;
    padding: 10px 14px;
}
#projectsModal .prj-tile.is-alarm { border-color: #e7a3a3; }
#projectsModal .prj-tile-label { font-size: 14px; color: #425264; }
#projectsModal .prj-tile-value { font-size: 21px; font-weight: 700; color: #0B4F5E; }
#projectsModal .prj-tile-note { font-size: 14px; color: #425264; margin-top: 2px; }
#projectsModal .prj-panel {
    background: #F7FBFC;
    border: 1px solid #E3EEF1;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 14px;
}
#projectsModal .prj-panel-title { font-size: 16px; font-weight: 600; color: #0B4F5E; margin-bottom: 10px; }
#projectsModal .prj-src { font-size: 14px; color: #7C9CA4; font-weight: 400; }

/* ============================================================
   Z-62. КАРТОЧКА ПРОЕКТА: ДВЕ КОЛОНКИ (её выбор «3» 04.10.2026). Слева
   «✏️ Смета проекта» - подпись над значением, правка щелчком; справа
   «📊 Как идёт проект» - полосы, короткая таблица, «Что сделать».
   Разметка - projects.js (_renderProjectWorkArea и соседи).
   ============================================================ */
#projectsModal .prj-cols {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 16px;
    margin-top: 14px;
    align-items: start;
}
@media (max-width: 900px) { #projectsModal .prj-cols { grid-template-columns: 1fr; } }
#projectsModal .prj-box { background: #fff; border: 1px solid #DCE7EA; border-radius: 10px; padding: 12px 16px; min-width: 0; }
#projectsModal .prj-box-title { font-size: 16px; font-weight: 600; color: #0B4F5E; margin-bottom: 10px; }
#projectsModal .prj-box-note { font-size: 14px; color: #5b6b7a; margin-top: 10px; }
#projectsModal .prj-kv + .prj-kv { margin-top: 8px; }
#projectsModal .prj-kv-label { font-size: 14px; color: #5b6b7a; }
#projectsModal .prj-kv-val {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    min-height: 32px; padding: 3px 4px 5px; border-bottom: 1px solid #E3EEF1;
    font-size: 15px; color: #1a2634; cursor: pointer; border-radius: 4px;
}
#projectsModal .prj-kv-val:hover, #projectsModal .prj-kv-val:focus { background: #EAF7F9; outline: none; }
#projectsModal .prj-kv-pen { font-size: 14px; opacity: 0; transition: opacity .12s; }
#projectsModal .prj-kv-val:hover .prj-kv-pen, #projectsModal .prj-kv-val:focus .prj-kv-pen { opacity: .7; }
#projectsModal .prj-kv-empty { color: #7C8899; }
#projectsModal .prj-kv-input { width: 100%; padding: 5px 6px; font-size: 15px; }
#projectsModal .prj-bars { display: grid; grid-template-columns: 70px 1fr; gap: 8px 10px; align-items: center; margin-bottom: 12px; }
#projectsModal .prj-bar-label { font-weight: 600; }
#projectsModal .prj-bar { position: relative; height: 24px; background: #EEF4F6; border-radius: 6px; overflow: hidden; }
#projectsModal .prj-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
#projectsModal .prj-bar i { position: absolute; right: 10px; top: 3px; font-style: normal; font-size: 14px; color: #1a2634; white-space: nowrap; }
#projectsModal table.prj-sum th { text-align: right; }
#projectsModal table.prj-sum th:first-child, #projectsModal table.prj-sum td:first-child { text-align: left; }
#projectsModal table.prj-sum td { text-align: right; white-space: nowrap; }
#projectsModal table.prj-sum td.prj-neg { color: #b13e3e; }
#projectsModal .prj-info {
    display: inline-block; width: 18px; height: 18px; margin-left: 5px; border: 1px solid #b8c7d3; border-radius: 50%;
    color: #7d8d9b; font-size: 14px; line-height: 16px; text-align: center; font-weight: 400; cursor: help; vertical-align: 1px;
}
#projectsModal .prj-todo { margin-top: 12px; border-left: 4px solid #0B6B82; background: #E0F2F6; border-radius: 6px; padding: 10px 14px; font-size: 14px; }
#projectsModal .prj-todo ul { margin: 6px 0 0; padding-left: 18px; }
#projectsModal .prj-todo li + li { margin-top: 4px; }
#projectsModal .prj-todo.is-ok { border-left-color: #1A8348; background: #E3F4EA; }
#projectsModal .prj-todo-link { color: #0B6B82; font-weight: 600; text-decoration: none; white-space: nowrap; }
#projectsModal .prj-todo-link:hover { text-decoration: underline; }

/* ============================================================
   Z-63. СПИСОК ПРОЕКТОВ (её выбор 04.10.2026): плитки сверху, в таблице
   цветная черта слева и «что не так» под названием, строки разделены
   тёмно-бирюзовой линией (как «Договоры», Z-34), срок - свой столбец,
   сортировка и поля отбора в шапке (как Z-02). Разметка - projects.js
   (_renderProjectsOverview и соседи).
   ============================================================ */
#projectsModal .prj-goal {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid #9FD3DD; border-radius: 8px; padding: 4px 10px; font-size: 14px;
}
#projectsModal .prj-goal input { width: 64px; padding: 3px 6px; }
#projectsModal .prj-list-tiles { margin-bottom: 12px; }
#projectsModal .prj-list-box { background: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#projectsModal .prj-list-box + .prj-list-box { margin-top: 12px; }
#projectsModal table.prj-list th { text-align: right; vertical-align: top; border-bottom: 2px solid #0B6B82; }
#projectsModal table.prj-list th.l, #projectsModal table.prj-list td.l { text-align: left; }
#projectsModal table.prj-list td { border-bottom: 1px solid #0B6B82; text-align: right; vertical-align: middle; }
#projectsModal table.prj-list-main { table-layout: fixed; min-width: 900px; }
#projectsModal table.prj-list th.prj-th { cursor: pointer; white-space: normal; }
#projectsModal table.prj-list th.prj-th.is-sorted { color: #0B4F5E; }
#projectsModal table.prj-list th .filter-input,
#projectsModal table.prj-list th .filter-select { display: block; width: 100%; margin-top: 5px; font-weight: 400; }
#projectsModal tr.prj-row td:first-child { border-left: 4px solid transparent; }
#projectsModal tr.prj-row.is-r td:first-child { border-left-color: #D14B4B; }
#projectsModal tr.prj-row.is-y td:first-child { border-left-color: #E0B040; }
#projectsModal tr.prj-row.is-g td:first-child { border-left-color: #3BA570; }
#projectsModal .prj-why { font-size: 14px; font-weight: 400; margin-top: 2px; }
#projectsModal .prj-why.is-r { color: #b13e3e; }
#projectsModal .prj-why.is-y { color: #8a5a00; }
#projectsModal .prj-why.is-g { color: #1d7240; }
#projectsModal .prj-date { white-space: nowrap; }
#projectsModal .prj-date.is-late { color: #b13e3e; font-weight: 600; }
#projectsModal .prj-mini { display: flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
#projectsModal .prj-mini-sum { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
#projectsModal .prj-mini-sum.is-empty { color: #7C8899; }
#projectsModal .prj-mini-of { font-size: 14px; color: #7C8899; }
#projectsModal .prj-mini-bar { position: relative; display: inline-block; width: 70px; height: 10px; background: #EEF4F6; border-radius: 5px; overflow: hidden; }
#projectsModal .prj-mini-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
#projectsModal .prj-mini-pct { width: 74px; text-align: left; color: #5b6b7a; font-size: 14px; }
#projectsModal .prj-near-empty { color: #5b6b7a; }
#projectsModal table.prj-near-t th, #projectsModal table.prj-near-t td { text-align: left; }
#projectsModal table.prj-near-t th:last-child, #projectsModal table.prj-near-t td:last-child { text-align: right; }

/* ============================================================
   Z-40. ПРАВИЛА РАЗНЕСЕНИЯ: СОРТИРОВКА ПО ШАПКЕ И ПОНЯТНЫЙ ВИД (её
   правка 27.09.2026: «тут нужна сортировка по шапке и более понятный
   визуал», вариант «б»). Разметка - paymentrules.js (_renderRulesList,
   _ruleConditionsHtml, _ruleActionHtml, setRulesSort).
   ============================================================ */
#paymentRulesModal .rules-table thead th.rules-th { cursor: pointer; white-space: nowrap; }
#paymentRulesModal .rules-table thead th.rules-th.is-sorted { color: #0B4F5E; }
#paymentRulesModal .rules-th-arrow { margin-left: 4px; color: #9FB7BE; }
#paymentRulesModal .rules-th.is-sorted .rules-th-arrow { color: #0B6B82; }
#paymentRulesModal .rules-table tbody td {
    border-bottom: 1px solid #E3EEF1;
    padding-top: 9px;
    padding-bottom: 9px;
}
#paymentRulesModal .rule-flags-row:empty { display: none; }
#paymentRulesModal .rule-flag {
    display: inline-block;
    margin: 4px 4px 0 0;
    padding: 0 8px;
    border-radius: 8px;
    white-space: nowrap;
}
#paymentRulesModal .rule-flag.is-warn { background: #FFF4DC; color: #8A5300; }
#paymentRulesModal .rule-flag.is-next { background: #EEF3F5; color: #5E7880; }
#paymentRulesModal .rule-type {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: 14px;
    white-space: nowrap;
}
#paymentRulesModal .rule-type.is-in { background: #E3F4EA; color: #1d7240; }
#paymentRulesModal .rule-type.is-out { background: #FDECEC; color: #b13e3e; }
#paymentRulesModal .rule-c { display: inline; line-height: 1.7; }
#paymentRulesModal .rule-c-field { color: #5E7880; }
#paymentRulesModal .rule-c-value { background: #E0F2F6; color: #0B4F5E; border-radius: 6px; padding: 0 7px; }
#paymentRulesModal .rule-c-join {
    display: block;
    color: #9FB7BE;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
#paymentRulesModal .rule-then-label { color: #7C9CA4; font-size: 14px; }
#paymentRulesModal .rule-then { color: #0B4F5E; font-weight: 600; }
#paymentRulesModal .rule-count { font-weight: 600; color: #0B4F5E; white-space: nowrap; }
#paymentRulesModal .rule-last { color: #7C9CA4; font-size: 14px; white-space: nowrap; }
#paymentRulesModal .rules-row-actions .btn-delete-row {
    opacity: 0;
    background: #fff;
    border: 1px solid #E3EEF1;
    border-radius: 6px;
    color: #9FB7BE;
    transition: opacity .15s;
}
#paymentRulesModal .rules-row-actions:hover .btn-delete-row,
#paymentRulesModal .rules-row-actions .btn-delete-row:focus-visible { opacity: 1; }
#paymentRulesModal .rules-row-actions .btn-delete-row:hover { border-color: #e7a3a3; color: #b13e3e; }
/* Стрелки ▲▼ перестановки (её правка 27.09.2026) видны всегда - это
   не «удалить», их не надо искать; под мышью - бирюзовые. */
#paymentRulesModal .rules-row-actions .btn-delete-row.rules-move { opacity: 1; color: #5E7880; }
#paymentRulesModal .rules-row-actions .btn-delete-row.rules-move:hover { border-color: #9FD3DD; color: #0B6B82; }
#paymentRulesModal .rules-row-actions .btn-delete-row.rules-move[disabled] { opacity: .35; }

/* ============================================================
   Z-41. АВТО ШТРАФЫ: НЕОПЛАЧЕННЫЕ - КАК ПРОСРОЧКА В КАЛЕНДАРЕ (её правка
   27.09.2026: при обходе программы «Авто штрафы» - самое яркое место;
   выбрала «а»). Было #f5b7b1 (под мышью #f6a69f) - вдвое насыщеннее
   просрочки платёжного календаря. Стало тот же #fbdcdc, под мышью
   #fbcbcb - как у просрочки в календаре. Оплаченные (#cfeede) не
   меняются.
   ============================================================ */
#autoFinesModal tr.leasing-overdue-row { background: #fbdcdc !important; }
#autoFinesModal tr.leasing-overdue-row:hover:not(.row-selected) > td { background-color: #fbcbcb !important; }

/* ============================================================
   Z-42. ОРГАНИЗАЦИИ → КОНТРАГЕНТЫ: ТАБЛИЦЕЙ, А НЕ КАРТОЧКАМИ (её правка
   27.09.2026: при обходе - «строки-карточки выбиваются»; выбрала «б»).
   Строки списка (#contractorList .contractor-item) - белые, без
   скругления, отступа и синей черты слева, между строками линия
   #E3EEF1; под мышью - общий светло-бирюзовый. Шапка - обычными
   буквами. Списки «ЭДО» и «Статус» в покое - текстом (без рамки и
   стрелки), рамка и стрелка - при наведении на сам список или в
   фокусе. Значок связи 🔗 у несвязанных - только при наведении на имя
   (у связанных виден всегда, как был). Строка
   фильтров (#contractorFilterRow) не меняется.
   ============================================================ */
#contractorModal #contractorList .contractor-item {
    background: #fff;
    border-radius: 0;
    margin-bottom: 0;
    border-left: none;
    border-bottom: 1px solid #E3EEF1;
    padding: 8px 12px;
}
#contractorModal #contractorList .contractor-item:hover { background: var(--row-hover-soft, #eaf7f9); }
#contractorModal #contractorHeaderRow {
    border-radius: 0;
    border-left: none;
    margin-bottom: 0;
    background: #F1F7F9;
    border-bottom: 1px solid #9FD3DD;
    text-transform: none;
    letter-spacing: 0;
    color: #5E7880;
}
#contractorModal #contractorFilterRow { border-radius: 0; margin-bottom: 0; border-left: none; }
#contractorModal #contractorList .contractor-item select {
    border-color: transparent;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
#contractorModal #contractorList .contractor-item select:hover,
#contractorModal #contractorList .contractor-item select:focus {
    border-color: #9FD3DD;
    background: #fff;
    -webkit-appearance: auto;
    appearance: auto;
}
/* Несвязанный (в разметке opacity:0.45) - прячем до наведения;
   связанный с другим лицом виден всегда, как был. */
#contractorModal #contractorList .contractor-link-btn[style*="opacity:0.45"] { opacity: 0 !important; }
#contractorModal #contractorList .contractor-item .name:hover .contractor-link-btn[style*="opacity:0.45"],
#contractorModal #contractorList .contractor-link-btn[style*="opacity:0.45"]:focus-visible { opacity: 0.6 !important; }

/* ============================================================
   Z-43. «ЗАПРОСИ ДОКУМЕНТЫ»: БЕЗ ЛИШНИХ СТОЛБЦОВ (её правка 27.09.2026:
   «зачем тут столбцы решение, связанные? выбираю действие чек - ничего
   не показывает»; на образец - «да»). Когда в окне сверки открыта
   карточка 'red' (= «Запроси документы»), у окна класс is-request-docs
   (reconciliation.js, applyFilter):
   - столбец «Связанные» скрыт (здесь всегда «-»); поле его фильтра
     остаётся в разметке, порядок фильтров не меняется;
   - «Решение» подписано «Запрос» (там кнопка «✉ Письмо»);
   - в фильтре «Действие» только «Все действия» и «без действия».
   На других карточках и вкладках - всё как было.
   ============================================================ */
/* Подпись «Решение» - текстом прямо в th (на порядок заголовков смотрит
   test_table.js), поэтому прячется через font-size: 0, а «Запрос» и
   фильтр возвращают свой размер. */
#reconciliationModal .th-label-request { display: none; }
#reconciliationModal.is-request-docs th.th-decision { font-size: 0; }
#reconciliationModal.is-request-docs th.th-decision .th-label-request { display: inline; font-size: 14px; }
#reconciliationModal.is-request-docs th.th-decision select { font-size: 14px; }
/* Z-54 (её выбор 28.09.2026, «в-3») отменяет здесь прятанье «Связанных» и
   вариантов «Чек»/«Акт» фильтра «Действие»: на «Запроси документы» столбец
   подписан «Документ» (блок Z-54 ниже), а в фильтре - «все · без действия ·
   Чек · Акт». */
#reconciliationModal.is-request-docs .action-filter-select option[value="archive"],
#reconciliationModal.is-request-docs .action-filter-select option[value="noclose"],
#reconciliationModal.is-request-docs .action-filter-select option[value="advance"] { display: none; }

/* ============================================================
   Z-46. РАЗОСЛАТЬ ПИСЬМА: ПИСЬМА СВЁРНУТЫ, РАСКРЫВАЮТСЯ ЩЕЛЧКОМ (её правка
   27.09.2026: «нужно, чтобы один контрагент не занимал всю страницу,
   пусть списки будут раскрывающиеся», вариант «б»). Карточка письма в
   покое - одна строка (галочка, ▸, контрагент, почта, число документов,
   кнопки). Раскрытая (.is-open) - один список: приветствие и строки
   документов; ✕ «убрать» у строки - только при наведении на строку.
   Текст письма (#lettersText_N) на экране не показывается - его берут
   «Отправить» и «Скопировать», он обновляется как раньше.
   ============================================================ */
#lettersModal .letters-card {
    background: #fff;
    border: 1px solid #E3EEF1 !important;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
}
#lettersModal .letters-card.is-open { border-color: #9FD3DD !important; }
#lettersModal .letters-caret,
#lettersModal .letters-head { cursor: pointer; }
#lettersModal .letters-caret { width: 16px; color: #0B6B82; font-weight: 700; margin-top: 2px; }
#lettersModal .letters-card > [id^="lettersText_"] { display: none; }
#lettersModal .letters-card:not(.is-open) > .letters-rows { display: none; }
#lettersModal .letters-greet { font-size: 14px; color: #0B4F5E; margin: 4px 0; }
#lettersModal .letters-rows [data-letters-row] { border-top: 1px solid #F1F7F9 !important; padding: 4px 0 !important; }
#lettersModal .letters-row-x {
    opacity: 0;
    background: #fff;
    border: 1px solid #E3EEF1;
    color: #9FB7BE;
    padding: 1px 8px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
}
#lettersModal .letters-rows [data-letters-row]:hover .letters-row-x,
#lettersModal .letters-row-x:focus-visible { opacity: 1; }
#lettersModal .letters-rows [data-letters-row]:hover { background: var(--row-hover-soft, #eaf7f9); }
#lettersModal .letters-row-x:hover { color: #b13e3e; border-color: #e7a3a3; }

/* ============================================================
   Z-47. КАРТОЧКА ЗАЯВКИ: КНОПКА «💰 АВАНС» (её правка 27.09.2026:
   «добавить новую кнопку рядом с загрузить закрывающие, левее - аванс;
   при её нажатии это будет означать, что закрывающие не нужны именно
   на эту оплату»; выбрала вариант «в»). Не нажата - белая с бирюзовой
   рамкой; нажата - бирюзовая «💰 Аванс ✓», а вместо «Загрузить
   закрывающие» тихая надпись «закрывающие не нужны».
   ============================================================ */
.inv-advance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #fff;
    color: #0B6B82;
    border: 1.5px solid #9FD3DD;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.inv-advance-btn:hover { background: var(--row-hover-soft, #eaf7f9); border-color: #0B6B82; }
.inv-advance-btn.is-on { background: #0B6B82; color: #fff; border-color: #0B6B82; }
.inv-advance-btn.is-on:hover { filter: brightness(1.1); }
.inv-noclosing-plate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #E0F2F6;
    color: #0B4F5E;
    border: 1px dashed #9FD3DD;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.inv-noclosing-plate.is-closed { font-weight: 600; border-style: solid; }
.inv-advance-cancel {
    border: 0;
    background: transparent;
    color: #7C9CA4;
    font-size: 14px;
    cursor: pointer;
}
.inv-advance-cancel:hover { color: #b13e3e; }
/* В ряду решения - высота и шрифт как у «Загрузить закрывающие»;
   вправо уезжает группа «Аванс + закрывающие», поэтому auto - на
   первой из них. */
#invoiceStageActions .inv-advance-btn,
#invoiceStageActions .inv-noclosing-plate { height: 44px; font-size: 15px; padding: 0 16px; }
#invoiceStageActions .inv-noclosing-plate { min-width: 220px; margin-left: auto; }
#invoiceStageActions .inv-advance-btn { margin-left: auto; }
/* НДС к мотивации (правка 13.10.2026): «Фамилия» и «НДС, %» в одну
   строку; под ними итог списания с мотивации - пустой не виден. */
.inv-motiv-row { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.inv-motiv-hint { font-size: 14px; color: #0B4F5E; background: #E0F2F6; border-radius: 4px; padding: 6px 10px; margin-top: 6px; }
.inv-motiv-hint:empty { display: none; }
.inv-motiv-vat-input { width: 70px; padding: 4px 6px; text-align: right; }

/* «💰 Аванс ▾» с выбором причины (её выбор 13.10.2026 - вариант Б
   образца): «Аванс» (документ придёт позже) или «📭 Закрывающие не нужны»
   (документа не будет вообще). Размеры ряда прежние. Выбрано «не нужны» -
   кнопка и плашка жёлто-коричневые, чтобы отличать от аванса. */
.inv-advance-dd { position: relative; display: inline-flex; margin-left: auto; }
#invoiceStageActions .inv-decision-right .inv-advance-dd { margin-left: 0; }
.inv-advance-dd .inv-advance-btn { margin-left: 0 !important; }
.inv-advance-btn.inv-nodocs-on { background: #e0a300; border-color: #e0a300; color: #fff; }
.inv-advance-menu { position: absolute; top: calc(100% + 4px); right: 0; background: #fff; border: 1px solid #9FD3DD;
    border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); min-width: 300px; z-index: 30; padding: 4px 0; }
.inv-advance-menu.hidden { display: none; }
.inv-advance-item { padding: 9px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; color: #0B4F5E; }
.inv-advance-item:hover { background: var(--row-hover-soft, #eaf7f9); }
.inv-advance-item.is-on { font-weight: 600; }
.inv-advance-item-nodocs { color: #7a5200; border-top: 1px solid #e0e6ea; }
.inv-advance-item-nodocs:hover { background: #fff6e5; }
.inv-noclosing-plate.is-nodocs { background: #fff6e5; color: #7a5200; border-color: #e0a300; }
#invoiceStageActions .inv-advance-btn + .btn-decision-closing,
#invoiceStageActions .inv-advance-btn + .inv-noclosing-plate { margin-left: 0; }
#invoiceStageActions .inv-noclosing-plate.is-closed { margin-left: 0; min-width: 0; }
/* Тройка «Аванс · Загрузить закрывающие · В запасы» в ряду согласования -
   одна группа (её выбор «2» 28.09.2026): не помещается - уходит на
   следующую строку целиком и остаётся прижатой вправо. Внутри группы
   прежние margin-left:auto не нужны - вправо уезжает сама группа. */
#invoiceStageActions .inv-decision-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}
#invoiceStageActions .inv-decision-right > * { margin-left: 0 !important; }

/* ============================================================
   Z-48. «ПОЧТА»: ВКЛАДКА «✈️ ТЕЛЕГРАМ» (её правка 28.09.2026, выбор по
   образцу: «б, но чтобы окно было отдельной вкладкой рядом с почтой, как
   в „в“»). Сверху окна - «✉️ Почта | ✈️ Телеграм (N)»; в «Телеграме» -
   таблица файлов, «💰 В заявку» прямо в строке.
   ============================================================ */
#mailModal .mail-source-switch { display: flex; gap: 6px; margin-bottom: 8px; }
#mailModal .mail-source-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #fff;
    color: #0B4F5E;
    border: 1px solid #E3EEF1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
#mailModal .mail-source-btn:hover { background: var(--row-hover-soft, #eaf7f9); }
#mailModal .mail-source-btn.active { background: #0B6B82; color: #fff; border-color: #0B6B82; }
#mailModal .mail-source-btn.active:hover { filter: brightness(1.08); }
#mailModal .mail-source-count {
    background: #fff;
    color: #0B6B82;
    border-radius: 9px;
    padding: 0 7px;
    font-size: 14px;
    line-height: 18px;
}
#mailModal .mail-source-btn:not(.active) .mail-source-count { background: #E0F2F6; }
#tgBody .tg-table-wrap { overflow: auto; background: #fff; border: 1px solid #E3EEF1; border-radius: 8px; }
#tgBody .tg-table { width: 100%; font-size: 14px; }
#tgBody .tg-table .num { text-align: right; white-space: nowrap; }
#tgBody .tg-table .tg-when { white-space: nowrap; }
#tgBody .tg-table .tg-actions { white-space: nowrap; text-align: right; }
#tgBody .tg-file { color: #0B6B82; }
#tgBody .tg-file-missing { color: #7C9CA4; }
#tgBody .tg-note,
#tgBody .tg-hint { font-size: 14px; color: #425264; margin-top: 8px; }
#tgBody .tg-set { margin: 8px 0; }
#tgBody .tg-link-note .btn { margin-left: 6px; }

/* ============================================================
   Z-49. ЧАТ - ВКЛАДКОЙ В «ПОЧТЕ» (её правка 28.09.2026: «давай чат
   перекинем как вкладку в почту»; выбор «б, но кнопки одного цвета»).
   Окно «💬 Чат и почта»: вкладки «Чат | Почта | Телеграм» - все белые;
   выбранная - бирюзовая рамка и бирюзовый текст, без заливки. Панель чата
   (#chatPanel) на вкладке «Чат» стоит внутри окна (#chatHost), а не
   поверх экрана.
   ============================================================ */
#mailModal .mail-source-btn.active {
    background: #fff;
    color: #0B6B82;
    border: 2px solid #0B6B82;
    padding: 5px 13px;
}
#mailModal .mail-source-btn.active:hover { background: var(--row-hover-soft, #eaf7f9); filter: none; }
#mailModal .mail-source-btn .mail-source-count,
#mailModal .mail-source-btn:not(.active) .mail-source-count { background: #E0F2F6; color: #0B6B82; }
#chatHost { display: flex; min-height: 420px; }
#chatHost #chatPanel.chat-panel {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    transform: none;
    transition: none;
    width: 100%;
    max-width: none;
    height: auto;
    flex: 1;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
}
#chatHost #chatPanel .chat-body { flex: 1; min-height: 0; box-shadow: none; border: 1px solid #E3EEF1; border-radius: 8px; }
/* «⤢» и «×» самой панели во вкладке не нужны: окно закрывается своим крестиком. */
#chatHost #chatWideBtn,
#chatHost .chat-close { display: none; }

/* ============================================================
   Z-50. «💡 ПОДСКАЗКИ» - В ОДНОМ УГЛУ ВО ВСЕХ ОКНАХ (её правка 28.09.2026:
   «давай перенесём все подсказки в один угол, чтобы при открытии было
   понятно, где их искать»; выбор «а»). Кнопка всегда в шапке окна, справа,
   перед крестиком (hints.js _hintsTabAnchor). order - потому что в
   некоторых шапках элементам задан свой порядок (например «Разнести
   платежи»: заголовок 1, «Правила» 2, крестик 3), и кнопка без порядка
   вставала первой - слева от названия.
   ============================================================ */
.modal-header > .hint-tab-head { order: 99; }
.modal-header > .modal-close { order: 100; }

/* ============================================================
   Z-50 «ДОГОВОРЫ»: ЧИСТКА И ВЫРАВНИВАНИЕ ТАБЛИЦЫ (её выбор 28.09.2026,
   образец Z-50_dogovory.png; номер Z-50 совпал с пунктом про подсказки из
   соседнего окна - это другой пункт). Над таблицей только «➕ Загрузить
   договор» и «Сбросить» (без плашки и пояснения); столбца «Файл» нет;
   ширины столбцов по образцу; тонкие светло-бирюзовые линии между
   столбцами; текст в ячейках - не больше 2 строк, полный - в окошке
   #ctrTip при наведении (contracts.js).
   ============================================================ */
#contractsModal .contracts-toolbar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    background: none; padding: 0;
}
#contractsModal .contracts-toolbar > label.btn,
#contractsModal .contracts-reset { min-height: 34px; box-sizing: border-box; }
#contractsModal .contracts-reset {
    background: #fff; border: 1px solid #9FD3DD; border-radius: 8px;
    color: #0B4F5E; font-weight: 600; padding: 6px 14px; font-size: 14px; cursor: pointer;
}
#contractsModal .contracts-reset:hover { background: #EAF7F9; }
#contractsModal .contracts-table { table-layout: fixed; width: 100%; }
#contractsModal .contracts-table thead th:nth-child(7),
#contractsModal .contracts-table thead th:nth-child(8) { white-space: nowrap; }
#contractsModal .contracts-table thead th .filter-input,
#contractsModal .contracts-table thead th .filter-select { width: 100%; box-sizing: border-box; min-width: 0; max-width: none; }
#contractsModal .contracts-table th + th,
#contractsModal .contracts-table tr.contract-row > td + td { border-left: 1px solid #C9E3E9; }
#contractsModal .ctr-clamp {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.35;
    overflow-wrap: anywhere;
}
#ctrTip {
    display: none; position: fixed; z-index: 100000; pointer-events: none;
    background: #fff; border: 1px solid #9FD3DD; border-radius: 8px;
    box-shadow: 0 4px 14px rgba(11,79,94,.18); padding: 8px 10px; box-sizing: border-box;
    font-size: 14px; font-weight: 400; color: #1c2b30; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere;
}

/* ============================================================
   Z-52 «ЛЕНТА» (её выбор 28.09.2026: «1а, 2б, 3б»). Поле ввода - блок с
   картинками внутри текста (сообщение, комментарий, правка); картинки в
   ленте - между строками; «✏️ Изменить» и серое «· изменено». По ТЗ
   мелкие надписи были 12.5px - здесь 14px: мельче 14px в программе
   шрифта нет (её правило, test_fonts_uniform.js).
   ============================================================ */
#feedModal .feed-editor {
    flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid #cfe0e4; border-radius: 10px;
    padding: 10px 14px; font-size: 15px; line-height: 1.5; color: #1a2e38; background: #fff;
    min-height: calc(2 * 1.5em + 22px); max-height: 300px; overflow-y: auto;
    white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
#feedModal .feed-editor:focus { outline: none; border-color: #3AA7BD; }
#feedModal .feed-editor-cm { min-height: 40px; border-radius: 20px; padding: 8px 16px; font-size: 14px; max-height: 240px; }
#feedModal .feed-reply { align-items: flex-end; }
#feedModal .feed-ed-img { position: relative; display: block; width: max-content; max-width: 240px; margin: 6px 0; line-height: 0; }
#feedModal .feed-ed-img img { max-width: 240px; max-height: 160px; border-radius: 8px; border: 1px solid #cfe0e4; display: block; }
#feedModal .feed-ed-x {
    position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: none;
    background: rgba(11,79,94,.75); color: #fff; font-size: 14px; line-height: 24px; padding: 0; cursor: pointer;
    visibility: hidden;
}
#feedModal .feed-ed-img:hover .feed-ed-x { visibility: visible; }
#feedModal .feed-inline-img { display: block; width: max-content; max-width: 100%; margin: 6px 0; line-height: 0; }
#feedModal .feed-inline-img img { max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid #CFE7EC; display: block; }
#feedModal .feed-cm-text .feed-inline-img img { max-height: 240px; }
#feedModal .feed-edited { color: #8a9aa3; font-size: 14px; }
#feedModal .feed-cm-edit {
    background: none; border: none; padding: 0; margin-top: 4px; cursor: pointer; font-family: inherit;
    font-size: 14px; font-weight: 600; color: #0E6E80; display: block;
}
#feedModal .feed-cm-edit:hover { text-decoration: underline; }
#feedModal .feed-text.is-editing, #feedModal .feed-cm-text.is-editing { white-space: normal; }
#feedModal .feed-edit-box .feed-editor { display: block; width: 100%; }
#feedModal .feed-edit-btns { display: flex; gap: 8px; margin-top: 8px; }
#feedModal .feed-edit-btns .btn { height: 38px; margin: 0; }
#feedModal .feed-edit-save:disabled { opacity: .5; cursor: default; }
#feedModal .feed-pending { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; }
#feedModal .feed-pending-x { background: none; border: none; color: #A3271F; cursor: pointer; font-size: 14px; padding: 0 2px; }

/* ============================================================
   Z-53 «БАНК → ИТОГИ» (её выбор 28.09.2026, «а»): компактнее и
   читабельнее. Только таблицы вкладки «Итоги» (.bank-accounts-table,
   .bank-cash-table) - остальные вкладки банка не трогаем. По ТЗ часть
   надписей была 12.5-13px - здесь 14px: мельче 14px шрифта в программе
   нет (её правило, test_fonts_uniform.js).
   ============================================================ */
#bankModal .bank-top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#bankModal .bank-total-box {
    margin-left: auto; background: #fff; border: 1px solid #9FD3DD; border-radius: 8px; padding: 6px 14px;
    font-size: 15px; font-weight: 400; color: #1c2b30; white-space: nowrap;
}
#bankModal .bank-total-box b { font-size: 17px; font-weight: 700; color: #0B4F5E; font-variant-numeric: tabular-nums; }
#bankModal .bank-cash-total-row { display: flex; margin-top: 12px; }
#bankModal .bank-cash-total { cursor: pointer; }
#bankModal .bank-cash-total:hover { background: #EAF7F9; }
#bankModal .bank-cash-title { font-size: 15px; font-weight: 700; color: #0B4F5E; margin: 16px 0 6px; }
#bankModal .bank-accounts-table, #bankModal .bank-cash-table { font-size: 15px; }
#bankModal .bank-accounts-table th, #bankModal .bank-cash-table th {
    font-size: 14px; padding: 7px 10px; border-bottom: 2px solid #0B6B82;
}
#bankModal .bank-accounts-table td, #bankModal .bank-cash-table td {
    padding: 6px 10px; line-height: 1.35; border-bottom: 1px solid #e3ecef;
}
#bankModal .bank-accounts-table td.bank-name-cell, #bankModal .bank-cash-table td.bank-name-cell {
    font-size: 14px; color: #1c2b30;
}
#bankModal .bank-acc-num { font-size: 14px; font-weight: 600; color: #0B4F5E; font-variant-numeric: tabular-nums; }
#bankModal .bank-acc-bank { font-size: 14px; color: #7c8899; font-weight: 400; }
#bankModal .bank-org-none { color: #9AA9B1; }
#bankModal .bank-accounts-table .bank-num, #bankModal .bank-cash-table .bank-num {
    text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 15px;
}
#bankModal .bank-accounts-table td.amount-pos, #bankModal .bank-cash-table td.amount-pos { color: #1F6B45 !important; font-weight: 400; }
#bankModal .bank-accounts-table td.amount-neg, #bankModal .bank-cash-table td.amount-neg { color: #A3271F !important; font-weight: 400; }
#bankModal .bank-accounts-table td.bank-bal, #bankModal .bank-cash-table td.bank-bal { color: #1c2b30; font-weight: 700; }
#bankModal .bank-dip-warn { text-align: left; font-size: 14px; color: #c0392b; font-weight: 400; margin-top: 4px; white-space: normal; }
#bankModal .bank-accounts-table th + th, #bankModal .bank-accounts-table td + td,
#bankModal .bank-cash-table th + th, #bankModal .bank-cash-table td + td { border-left: 1px solid #C9E3E9; }
#bankModal .bank-accounts-table .bank-del-cell { width: 28px; padding-left: 2px; padding-right: 2px; }
#bankModal .bank-accounts-table tfoot td {
    font-weight: 700; background: #F3F8F9; border-top: 2px solid #0B6B82; border-bottom: none;
}
#bankModal .bank-accounts-table tfoot td.amount-pos, #bankModal .bank-accounts-table tfoot td.amount-neg { font-weight: 700; }

/* ============================================================
   Z-54 «ЗАПРОСИ ДОКУМЕНТЫ» - ОДИН СПИСОК ВМЕСТЕ С ЧЕКАМИ И АКТАМИ (её
   выбор 28.09.2026, «в-3»). Строки чека и акта на этой вкладке видны как
   обычные (на других карточках они по-прежнему спрятаны archived-row);
   «Связанные» подписан «Документ» и показывает .req-doc; «Список | Итог».
   ============================================================ */
#reconciliationModal .th-label-doc,
#reconciliationModal .req-doc { display: none; }
#reconciliationModal.is-request-docs th.th-pairinfo { font-size: 0; }
#reconciliationModal.is-request-docs th.th-pairinfo .th-label-doc { display: inline; font-size: 14px; }
#reconciliationModal.is-request-docs th.th-pairinfo input { font-size: 14px; }
#reconciliationModal.is-request-docs #resultsBody td[data-column="pairInfo"] .pair-info-text { display: none; }
#reconciliationModal.is-request-docs #resultsBody td[data-column="pairInfo"] .req-doc { display: block; }
#reconciliationModal.is-request-docs #resultsBody tr.archived-row[data-filter="check"]:not(.hidden-row),
#reconciliationModal.is-request-docs #resultsBody tr.archived-row[data-filter="act"]:not(.hidden-row) { display: table-row; }
#reconciliationModal .req-doc-none { color: #9AA9B1; }
#reconciliationModal .req-doc-wait { color: #b36b00; }
#reconciliationModal .req-doc-sign { display: block; margin-top: 4px; font-size: 14px; cursor: pointer; white-space: nowrap; }

/* ============================================================
   Z-55 «АВАНСОВЫЙ ОТЧЁТ» (её выбор 28.09.2026: вид «1а» - плитки сверху,
   всё в одну колонку; «＋» в начале строки - копировать строку; одна
   печать). По ТЗ подписи плиток и шапка таблицы были 12.5-13px - здесь
   14px: мельче 14px шрифта в программе нет (её правило).
   ============================================================ */
#avansReportModal .avr-card { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
#avansReportModal .avr-head { font-size: 18px; font-weight: 700; color: #0B4F5E; margin-bottom: 12px; }
#avansReportModal .avr-head-who { font-size: 15px; font-weight: 400; color: #6b8790; }
#avansReportModal .avr-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
#avansReportModal .avr-tile {
    flex: 1 1 200px; background: #fff; border: 1px solid #cfe0e4; border-radius: 10px; padding: 8px 12px; box-sizing: border-box;
}
#avansReportModal .avr-tile-main { background: #E6F5F8; border-color: #9FD3DD; }
#avansReportModal .avr-tile-l { font-size: 14px; color: #6b8790; }
#avansReportModal .avr-tile-v { font-size: 20px; font-weight: 700; color: #0B4F5E; font-variant-numeric: tabular-nums; }
#avansReportModal .avr-tile-n { font-size: 14px; }
#avansReportModal .avr-row { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
#avansReportModal .avr-lbl { font-size: 14px; color: #6b8790; margin-bottom: 4px; }
#avansReportModal .avr-select { padding: 6px 8px; min-width: 200px; height: 38px; border: 1px solid #cfe0e4; border-radius: 6px; }
#avansReportModal .avr-receipts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#avansReportModal .avr-chips { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#avansReportModal .avr-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px 0 12px; box-sizing: border-box;
    border: 1px solid #cfe0e4; border-radius: 16px; background: #F7FBFC; font-size: 14px;
}
#avansReportModal .avr-chip a { color: #1c2b30; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#avansReportModal .avr-chip-x {
    width: 24px; height: 24px; border: 1px solid #E7AFA9; border-radius: 6px; background: #fff; color: #A3271F;
    font-size: 14px; line-height: 22px; padding: 0; cursor: pointer;
}
#avansReportModal .avr-pick { display: inline-flex; align-items: center; }
#avansReportModal .avr-status { font-size: 14px; color: #1a2634; margin-top: 4px; }
#avansReportModal .avr-items { width: 100%; }
#avansReportModal .avr-items th { font-size: 14px; color: #6b8790; border-bottom: 2px solid #0B6B82; }
#avansReportModal .avr-items td { border-bottom: 1px solid #e3ecef; }
#avansReportModal .avr-items th + th, #avansReportModal .avr-items td + td { border-left: 1px solid #C9E3E9; }
#avansReportModal .avr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#avansReportModal .avr-plus-cell { width: 34px; text-align: center; padding-left: 4px; padding-right: 4px; }
#avansReportModal .avr-copy {
    width: 24px; height: 24px; border: 1px solid #9FD3DD; border-radius: 6px; background: #fff; color: #0B6B82;
    font-weight: 700; font-size: 14px; line-height: 22px; padding: 0; cursor: pointer;
}
#avansReportModal .avr-copy:hover { background: #E6F5F8; }
#avansReportModal .avr-name-wrap { display: flex; align-items: center; gap: 8px; }
#avansReportModal .avr-in {
    width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid #cfe0e4; border-radius: 6px; font-size: 14px;
}
#avansReportModal .avr-in-sum { text-align: right; font-variant-numeric: tabular-nums; }
#avansReportModal .avr-from-receipt { font-size: 14px; color: #2980b9; white-space: nowrap; }
#avansReportModal .avr-items tr.avr-row-new td { background: #FFF8E1; }
#avansReportModal .avr-items tr.avr-row-new.avr-row-fade td { transition: background-color 2s ease; background: transparent; }
#avansReportModal .avr-add-row,
#avansReportModal .avr-print-btn {
    background: #fff !important; border: 1px solid #9FD3DD !important; border-radius: 8px; color: #0B4F5E !important; font-weight: 600;
}
#avansReportModal .avr-add-row { margin-top: 8px; }
#avansReportModal .avr-route { margin-top: 12px; }
#avansReportModal .avr-route-t { font-size: 14px; color: #48636B; }
#avansReportModal .avr-actions {
    display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3ecef;
}
#avansReportModal .avr-submit { background: #1A8348 !important; border-color: #1A8348 !important; color: #fff !important; font-weight: 600; }
#avansReportModal .avr-view-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#avansReportModal .avr-view-btns { display: flex; gap: 10px; }
/* «✅ Согласовать» в открытом отчёте (её «а» 05.10.2026) - как «Отправить на согласование» у формы. */
#avansReportModal .avr-approve-btn { background: #1A8348 !important; border: 1px solid #1A8348 !important; border-radius: 8px; color: #fff !important; font-weight: 600; }
#avansReportModal .avr-return-btn { background: #fff !important; border: 1px solid #c0392b !important; border-radius: 8px; color: #c0392b !important; font-weight: 600; }
#avansReportModal .avr-return-box { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
#avansReportModal .avr-return-box .avr-in { flex: 1; }
#avansReportModal .avr-wait-note { font-size: 14px; color: #425264; margin-bottom: 12px; }
#avansReportModal .avr-wait { font-size: 14px; color: #425264; white-space: nowrap; }
#avansReportModal .avr-history { font-size: 14px; color: #425264; margin-top: 6px; }

/* ============================================================
   Z-56 «📈 РЕАЛИЗАЦИИ» (её выбор 28.09.2026, «а»): шапка - одна строка без
   плашек, без загрузки файла; итоги - плитками; таблицы - 14px, линии между
   столбцами, суммы и проценты по правому краю. По ТЗ часть надписей была
   12.5-13px - здесь 14px: мельче 14px шрифта в программе нет (её правило).
   ============================================================ */
#realizationsModal .rlz-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; background: none; padding: 0;
}
#realizationsModal .rlz-toolbar label { font-size: 14px; color: #0B4F5E; }
#realizationsModal .rlz-toolbar input[type="date"] { padding: 4px 6px; }
#realizationsModal .rlz-meta { margin-left: auto; font-size: 14px; color: #6b8790; white-space: nowrap; }
#realizationsModal #realizationsStatus { font-size: 14px; color: #6b8790; }
#realizationsModal .rlz-service-link { cursor: pointer; text-decoration: underline dotted; color: #6b8790; }
#realizationsModal #rlzServiceBtns { gap: 8px; align-items: center; }
#realizationsModal .rlz-btn {
    background: #fff !important; border: 1px solid #9FD3DD !important; border-radius: 8px; color: #0B4F5E !important;
    padding: 5px 12px; font-size: 14px;
}
#realizationsModal .rlz-btn-danger { color: #A3271F !important; border-color: #E7AFA9 !important; }
#realizationsModal .rlz-tiles { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
#realizationsModal .rlz-tile {
    flex: 1 1 180px; background: #fff; border: 1px solid #cfe0e4; border-radius: 10px; padding: 8px 12px; box-sizing: border-box;
}
#realizationsModal .rlz-tile-l { font-size: 14px; color: #6b8790; }
#realizationsModal .rlz-tile-v { font-size: 19px; font-weight: 700; color: #0B4F5E; font-variant-numeric: tabular-nums; }
#realizationsModal .rlz-tile-n { font-size: 14px; color: #6b8790; }
#realizationsModal .rlz-tile-filter { display: flex; align-items: center; flex: 0 1 auto; }
#realizationsModal .rlz-tile-filter label { font-size: 14px; color: #1c2b30; white-space: nowrap; }
#realizationsModal .rlz-tile-filter input[type="number"] { width: 56px; padding: 4px 6px; }
#realizationsModal .rlz-table { font-size: 14px; }
#realizationsModal .rlz-table th { font-size: 14px; color: #6b8790; border-bottom: 2px solid #0B6B82; }
#realizationsModal .rlz-table td { border-bottom: 1px solid #e3ecef; }
#realizationsModal .rlz-table th + th, #realizationsModal .rlz-table td + td { border-left: 1px solid #C9E3E9; }
#realizationsModal .rlz-table .rlz-c { text-align: center; }
#realizationsModal .rlz-table .rlz-r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   Z-54 KPI → «СОТРУДНИКИ» (её выбор 28.09.2026, «а», образец
   z54_kpi.html; номер Z-54 совпал с «Запроси документы» - другой пункт).
   Поля в строках - без рамок и без плашек, в том числе под мышью (меняется
   только курсор); при вписывании - тонкая тёмно-бирюзовая черта под
   значением. Линии между столбцами и строками, длинные заголовки
   переносятся; 🖨 и ✕ - только у строки под мышью. Прежняя тёмная рамка
   .kpi-editable (с !important) здесь перебивается.
   ============================================================ */
#kpiModal .kpi-emp-table { table-layout: fixed; width: 100%; }
#kpiModal .kpi-emp-table th {
    white-space: normal; line-height: 1.2; vertical-align: bottom; border-bottom: 2px solid #0B6B82;
}
#kpiModal .kpi-emp-table td { border-bottom: 1px solid #0B6B82; vertical-align: middle; padding-top: 5px; padding-bottom: 5px; }
#kpiModal .kpi-emp-table th + th, #kpiModal .kpi-emp-table td + td { border-left: 1px solid #C9E3E9; }
#kpiModal .kpi-emp-table .kpi-num { text-align: right; font-variant-numeric: tabular-nums; }
#kpiModal .kpi-emp-table td.kpi-num { white-space: nowrap; }
#kpiModal .kpi-emp-table .kpi-editable {
    width: 100%; box-sizing: border-box; height: 30px; padding: 0 7px; min-width: 0;
    border: 1px solid transparent !important; background: transparent; border-radius: 6px;
    font: inherit; color: #1d2a33; cursor: text; box-shadow: none;
}
#kpiModal .kpi-emp-table select.kpi-editable { appearance: none; -webkit-appearance: none; cursor: pointer; }
#kpiModal .kpi-emp-table .kpi-in-num { text-align: right; -moz-appearance: textfield; }
#kpiModal .kpi-emp-table .kpi-in-num::-webkit-outer-spin-button,
#kpiModal .kpi-emp-table .kpi-in-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#kpiModal .kpi-emp-table .kpi-editable:focus {
    outline: none; border-radius: 0; border-color: transparent !important; border-bottom: 2px solid #0B6B82 !important;
}
#kpiModal .kpi-acts { display: flex; gap: 6px; justify-content: center; }
#kpiModal .kpi-act {
    width: 30px; height: 28px; border: 1px solid #D5E3E8; border-radius: 6px; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px; padding: 0; opacity: 0;
}
#kpiModal .kpi-emp-table tr:hover .kpi-act, #kpiModal .kpi-act:focus-visible { opacity: 1; }

/* ============================================================
   Z-57 «ЧАТ И ПОЧТА → ✈️ ТЕЛЕГРАМ» (её выбор 29.09.2026, «а»: «убери
   это, всё пусть будет одним списком»): ряда кнопок над таблицей нет,
   фильтры «Откуда» и «Заявка» - в шапке столбцов, как Z-50…Z-56.
   Линии между столбцами и строками; «Заявка» - по левому краю.
   ============================================================ */
#tgBody .tg-table th { font-size: 14px; color: #6b8790; border-bottom: 2px solid #0B6B82; vertical-align: top; }
#tgBody .tg-table td { border-bottom: 1px solid #e3ecef; }
#tgBody .tg-table th + th, #tgBody .tg-table td + td { border-left: 1px solid #C9E3E9; }
#tgBody .tg-table th.num { text-align: right; }
#tgBody .tg-table .tg-actions { text-align: left; }
#tgBody .tg-table th .filter-select {
    display: block; width: 100%; margin-top: 4px; font-size: 14px;
    border: 1px solid #cfe0e4; border-radius: 6px; padding: 2px 4px; box-sizing: border-box;
}
#tgBody .tg-table tr.tg-nothing td { color: #425264; padding: 12px; }
#tgBody .tg-table tr.tg-nothing a { color: #0B6B82; }
/* Ширины столбцов - как в образце, чтобы при пустом списке шапка не прыгала. */
#tgBody .tg-table { table-layout: fixed; }
#tgBody .tg-table th:nth-child(1) { width: 10%; }
#tgBody .tg-table th:nth-child(2) { width: 17%; }
#tgBody .tg-table th:nth-child(3) { width: 12%; }
#tgBody .tg-table th:nth-child(4) { width: auto; }
#tgBody .tg-table th:nth-child(5) { width: 12%; }
#tgBody .tg-table th:nth-child(6) { width: 236px; }
#tgBody .tg-table td { overflow-wrap: anywhere; }
/* Имя файла - в одну строку с «…», целиком при наведении (её выбор 14.10.2026):
   все строки одной высоты. */
#tgBody .tg-table td.tg-file-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* «Заявка · архив»: три места фиксированной ширины, один цвет. */
#tgBody .tg-slots { display: grid; grid-template-columns: 132px 32px; gap: 6px; align-items: center; }
#tgBody .tg-act { display: inline-flex; align-items: center; justify-content: center; height: 28px; box-sizing: border-box;
    border: 1px solid #9FD3DD; border-radius: 4px; background: #fff; color: #0B6B82; font: inherit; font-size: 14px;
    white-space: nowrap; cursor: pointer; padding: 0 6px; text-decoration: none; width: 100%; }
#tgBody .tg-act:hover { background: #E0F2F6; }
#tgBody .tg-act-main { background: #0B6B82; border-color: #0B6B82; color: #fff; font-weight: 600; }
#tgBody .tg-act-main:hover { background: #095a6d; }
#tgBody .tg-act-done { border-color: transparent; background: transparent; text-decoration: underline; justify-content: flex-start; }
#tgBody .tg-act-done:hover { background: transparent; }
#tgBody .tg-act-muted { border-color: transparent; background: transparent; color: #6b7f88; cursor: default; }
#tgBody .tg-act-muted:hover { background: transparent; }
#tgBody .tg-act-x { color: #6b7f88; }

/* ============================================================
   НАКОПЛЕННЫЙ РЕЕСТР ДЛЯ 1С (её правка 30.09.2026): вкладки «Новые /
   Отправлено в 1С / Убранные», кнопки справа, галочки в первом столбце.
   ============================================================ */
#invoicesBoard .reestr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#invoicesBoard .reestr-gap { flex: 1 1 auto; }
#invoicesBoard .reestr-act:disabled { opacity: 0.5; cursor: default; }
#invoicesBoard .reestr-sum { margin-bottom: 8px; font-size: 15px; color: #1a2634; }
#invoicesBoard .reestr-wrap { overflow: auto; }
/* Её правка 02.10.2026: «сделай строки более читабельными, чтобы данные
   были как в таблице». Столбцы закреплены по ширине (colgroup в
   invoices.js), между ними линейки, строки через одну с полоской, числа
   в столбик по разряду. Кегль прежний: мельче 14px в программе нет. */
#invoicesBoard .reestr-table { table-layout: fixed; }   /* ширина - числом в самой таблице (сумма столбцов, п. 9) */
#invoicesBoard .reestr-table th { white-space: nowrap; }
#invoicesBoard .reestr-table th,
#invoicesBoard .reestr-table td { border-right: 1px solid #e3eaed; vertical-align: top;
    overflow-wrap: anywhere; }
#invoicesBoard .reestr-table th:last-child,
#invoicesBoard .reestr-table td:last-child { border-right: 0; }
#invoicesBoard .reestr-table tr.reestr-zebra > td { background: #f7fbfc; }
#invoicesBoard .reestr-table .reestr-money { text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums; font-weight: 600; }
#invoicesBoard .reestr-table .reestr-cb { width: 32px; text-align: center; }
#invoicesBoard .reestr-table .reestr-no { white-space: nowrap; }
/* Дата отправки/уборки - одной строкой, имя под ней - до 2 строк (её правило
   22.10.2026: на странице реестра любая ячейка - не выше 2 строк). */
#invoicesBoard .reestr-table .reestr-when { white-space: normal; }
/* «Где» (её выбор 22.10.2026): сплошная линия пути цветом стадии, как столбец
   канбана; остаток - светло-серый; название стадии под ней - до 2 строк. */
#invoicesBoard .reestr-liniya { height: 6px; border-radius: 3px; background: #e3eaee; margin: 4px 0 5px; overflow: hidden; }
#invoicesBoard .reestr-liniya > b { display: block; height: 100%; border-radius: 3px; }
#invoicesBoard .reestr-stage { font-size: 14px; color: #6b8790; }
/* Не выше двух строк (её правка 03.10.2026), остальное - в подсказке при наведении. */
#invoicesBoard .reestr-cut { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }   /* до трёх строк (её правка 22.10.2026) */
#invoicesBoard .reestr-table td.reestr-no { overflow: hidden; text-overflow: ellipsis; }
/* П. 9 (04.10.2026): ползунок ширины на правом краю заголовка - как
   .sheet-table thead th .col-resizer; метки скрытых - общие .sheet-hidden-mark. */
#invoicesBoard .reestr-table thead tr:first-child th { position: relative; }
#invoicesBoard .reestr-table thead th .col-resizer { top: 0; bottom: 0; right: 0; width: 8px; }
#invoicesBoard .reestr-razobratsya { padding: 0 8px; font-size: 14px; line-height: 1.4; }

/* ============================================================
   Z-59. «МОИ КОНТАКТЫ» → КОМУ ОТДАТЬ: окно со списком сотрудников и
   галочками (её выбор 30.09.2026, вариант «б»). Окно - то же
   .ask-confirm-overlay, что у askChoice; разметка - phones.js,
   _askPhoneRecipients.
   ============================================================ */
.ask-confirm-box.ph-pick-box { max-width: 500px; }
.ph-pick-search {
    width: 100%; box-sizing: border-box; height: 36px; margin-bottom: 8px;
    border: 1px solid #9FD3DD; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 15px;
}
.ph-pick-list { border: 1px solid #D5E3E8; border-radius: 8px; max-height: 300px; overflow-y: auto; }
.ph-pick-person {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer;
    border-bottom: 1px solid #EEF4F6;
}
.ph-pick-person:last-child { border-bottom: none; }
.ph-pick-person:hover { background: #EAF6F8; }
.ph-pick-person.is-on { background: #E3F5EA; }
.ph-pick-av {
    width: 30px; height: 30px; flex: none; border-radius: 50%; background: #0B6B82; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.ph-pick-name { flex: 1; display: flex; flex-direction: column; }
.ph-pick-login { color: #7A8A96; font-size: 14px; }
.ph-pick-empty { padding: 10px; color: #7A8A96; }
.ph-pick-foot { align-items: center; }
.ph-pick-all { margin-right: auto; color: #0B6B82; cursor: pointer; }
.ph-pick-foot .btn:disabled { opacity: 0.45; cursor: default; }

/* ============================================================
   🚔 АВТО ШТРАФЫ (её правка 30.09.2026): стрелки вбок - те же, что в
   согласовании счетов и календаре (.kanban-arrow), поле таблицы - до низа
   экрана; новая строка - черновик, как в платёжном календаре: бледно-
   жёлтая, слева полоса, 📌, в конце «готово».
   ============================================================ */
#autoFinesTableWrap .af-table-host { position: relative; }
#autoFinesTableWrap tr.af-draft-row > td:first-child { box-shadow: inset 4px 0 0 #e6c84f; }
#autoFinesTableWrap .autofine-paid-check:disabled { cursor: default; opacity: 1; }

/* ============================================================
   АДАПТАЦИЯ ПОД МОНИТОР И ТЕЛЕФОН, БЛОК 1 - КАРКАС (её выбор 01.10.2026,
   вариант «А»: «сделай адаптацию экрана по размеру монитора и под
   мобильный телефон, особенно важно сделать согласование счетов»).

   МОНИТОР. Окна и так во всю ширину; колонки доски теперь тянутся
   (flex: 1 1 272px в invoices.js / tasks.js), на широком экране справа
   не остаётся пустоты. В узком окне (769-1100 px) боковая панель
   сжимается до значков, чтобы окну осталось место; полное меню
   выезжает по «»».

   ТЕЛЕФОН (до 768 px). Панель уезжает за левый край и выезжает по
   «☰ Ещё» (mobile.js); внизу полоса из четырёх главных кнопок; окна во
   весь экран над полосой; шапка окна не уезжает; ряды кнопок над
   содержимым прокручиваются вбок, а не переносятся на три строки.
   Шрифт нигде не меньше 14 px. Доска согласования и таблицы - блоки 2 и 3.
   ============================================================ */
:root { --mob-bar-h: 58px; }
#mobileBar, #mobileMenuShade { display: none; }

/* --- узкое окно на мониторе: панель значками --- */
.sb-expand { display: none; width: 100%; margin: 0 0 8px; padding: 8px 0; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; background: rgba(255,255,255,0.6); font-size: 16px; cursor: pointer; }
@media (min-width: 769px) and (max-width: 1100px) {
    :root { --sidebar-w: 64px; }
    body:not(.sb-wide) .sidebar { padding: 12px 8px; }
    body:not(.sb-wide) .sidebar .logo > div,
    body:not(.sb-wide) .sidebar .sb-user,
    body:not(.sb-wide) .sidebar .search-box,
    body:not(.sb-wide) .sidebar .section-title-text,
    body:not(.sb-wide) .sidebar .section-toggle { display: none !important; }
    body:not(.sb-wide) .sidebar .section-title { height: 8px; padding: 0; margin: 4px 0; border-top: 1px solid rgba(0,0,0,0.08); }
    body:not(.sb-wide) .sidebar .btn-group .btn { padding: 10px 0; justify-content: center; gap: 0; font-size: 0; }
    body:not(.sb-wide) .sidebar .btn-group .btn .icon { font-size: 20px !important; display: inline-block; }
    body:not(.sb-wide) .sidebar .btn-group .btn .btn-counter { position: absolute; right: 4px; top: 2px; font-size: 14px; padding: 0 5px; }
    body:not(.sb-wide) .sidebar .btn-group .btn { position: relative; }
    .sb-expand { display: block !important; }
    body.sb-wide .sidebar { position: fixed; left: 0; top: 0; width: 272px; z-index: 1200; box-shadow: 8px 0 24px rgba(0,0,0,0.18); }
    body.sb-wide .modal { left: 64px; width: calc(100% - 64px); }
}

/* --- телефон --- */
@media (max-width: 768px) {
    html, body { height: 100%; }
    body { display: block; height: 100%; overflow: hidden; padding-bottom: 0; }
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: var(--mob-bar-h); width: min(86vw, 320px); max-height: none;
        z-index: 1300; transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)); box-shadow: none; height: auto;
    }
    body.mob-menu-open .sidebar { transform: translateX(0); box-shadow: 8px 0 28px rgba(0,0,0,0.25); }
    #mobileMenuShade { display: none; position: fixed; inset: 0 0 var(--mob-bar-h) 0; background: rgba(10,30,40,0.35); z-index: 1250; }
    body.mob-menu-open #mobileMenuShade { display: block; }
    .main { height: 100%; padding: 10px 12px calc(var(--mob-bar-h) + 10px); overflow-y: auto; }
    .top-bar h1 { font-size: 20px; }

    #mobileBar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 0 env(safe-area-inset-bottom, 0px); z-index: 1400;
        background: var(--wc-glass-strong, rgba(255,255,255,0.92)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0,0,0,0.10);
    }
    .mob-bar-btn {
        flex: 1 1 0; min-width: 0; border: none; background: transparent; color: var(--wc-text-main, #1a2634);
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 0; cursor: pointer; font: inherit;
    }
    .mob-bar-icon { position: relative; font-size: 22px; line-height: 1; }
    .mob-bar-label { font-size: 14px; letter-spacing: -0.3px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .mob-bar-btn.is-active { color: #0B4F5E; }
    .mob-bar-btn.is-active .mob-bar-label { font-weight: 800; }
    .mob-bar-count { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; border-radius: 9px; background: #e74c3c; color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; text-align: center; padding: 0 4px; }

    /* окна - во весь экран над полосой */
    .modal { left: 0; width: 100%; top: 0; height: calc(100% - var(--mob-bar-h) - env(safe-area-inset-bottom, 0px)); }
    .modal-content { padding: 6px 10px 4px !important; }
    .modal-header { flex-wrap: wrap; gap: 6px; margin-bottom: 6px !important; padding-bottom: 6px !important; }
    .modal-header h2 { flex: 1 1 60px; width: auto; font-size: 19px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; order: 0; }
    .modal-header .modal-close { order: 1; flex: 0 0 auto; margin-left: auto; font-size: 30px; line-height: 1; padding: 0 4px; }
    .modal-header > *:not(h2):not(.modal-close) { order: 2; flex: 1 1 160px; width: auto !important; max-width: 100% !important; margin: 0 !important; }
    .modal-header > button:not(.modal-close), .modal-header > label { flex: 0 0 auto; }
    /* плашки, прибитые к низу (демо, cookie) - над полосой кнопок */
    #demoBadge { bottom: calc(var(--mob-bar-h) + 8px) !important; right: 8px !important; max-width: calc(100vw - 16px) !important; }
    #cookieNote, .cookie-note { bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px)) !important; }

    /* ряды кнопок над содержимым - одной прокручиваемой строкой */
    .modal-body > [id$="Toolbar"], .modal-body > .modal-toolbar, .modal-body > div[style*="flex-wrap"],
    .modal-body > .lz-tabs, .modal-body > .tabs-row {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; gap: 6px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
    }
    .modal-body > [id$="Toolbar"]::-webkit-scrollbar, .modal-body > div[style*="flex-wrap"]::-webkit-scrollbar { display: none; }
    .modal-body > [id$="Toolbar"] > *, .modal-body > div[style*="flex-wrap"] > * { flex: 0 0 auto; white-space: nowrap; }

    /* окна-подтверждения и всплывающие формы - не шире экрана */
    .ask-confirm-box, .inv-card-modal, .modal-content > .modal-body > .card-modal { max-width: 100vw; }
    /* никакой страницы шире экрана */
    .modal-body { max-width: 100%; }
}

/* ============================================================
   АДАПТАЦИЯ, БЛОК 2 - СОГЛАСОВАНИЕ СЧЕТОВ НА ТЕЛЕФОНЕ (01.10.2026,
   вариант «А»: «особенно важно сделать согласование счетов»).

   Стадия занимает экран целиком и «прилипает» при смахивании
   (scroll-snap), над доской - строка вкладок со стадиями и числом
   заявок (mobile.js, syncBoardStageTabs). Карточка на доске короткая:
   контрагент, сумма, дата, ЭДО и кнопки решения - остальное в самой
   заявке, которая открывается во весь экран. Кнопки «Согласовать /
   Отклонить» в открытой заявке прибиты к низу окна.
   На мониторе ничего из этого не действует.
   ============================================================ */
#boardStageTabs { display: none; }

@media (max-width: 768px) {
    /* строка вкладок стадий */
    #boardStageTabs {
        display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; margin: 0 0 8px;
        padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #boardStageTabs::-webkit-scrollbar { display: none; }
    .board-tab {
        flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.75);
        color: #1a2634; border-radius: 16px; padding: 7px 12px; font: inherit; font-size: 14px;
        white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 6px;
    }
    .board-tab.is-active { background: #0B4F5E; color: #fff; border-color: #0B4F5E; font-weight: 700; }
    .board-tab-n { background: rgba(0,0,0,0.10); border-radius: 9px; padding: 0 6px; font-size: 14px; }
    .board-tab.is-active .board-tab-n { background: rgba(255,255,255,0.22); }

    /* одна стадия на экран, прилипает */
    #invoicesBoard .kanban-scroll, #tasksBoard .kanban-scroll {
        scroll-snap-type: x mandatory; gap: 0 !important;
    }
    #invoicesBoard .kanban-column, #tasksBoard .kanban-column {
        scroll-snap-align: start; min-width: 100% !important; flex: 0 0 100% !important; padding: 0 1px;
    }
    /* стрелки «‹ ›» на телефоне не нужны - есть вкладки и смахивание */
    #invoicesBoard .kanban-arrow, #tasksBoard .kanban-arrow { display: none; }

    /* короткая карточка на доске: подробности - в самой заявке */
    #invoicesBoard .inv-k-author,
    #invoicesBoard .inv-k-org,
    #invoicesBoard .inv-k-purpose,
    #invoicesBoard .inv-k-source,
    #invoicesBoard .inv-k-personal { display: none; }
    #invoicesBoard .inv-k-comment { margin-top: 6px; }
    #invoicesBoard .kanban-decision .btn-decision-yes,
    #invoicesBoard .kanban-decision .btn-decision-no { min-height: 40px; font-size: 15px; }

    /* открытая заявка: сведения в одну колонку, решение под пальцем */
    #invoiceDetailModal .invoice-info-table { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    #invoiceDetailModal .invoice-info-table > .k { white-space: normal; font-size: 14px; color: #5b6b7c; font-weight: 600; margin-top: 6px; }
    #invoiceDetailModal .invoice-info-table > .v { font-size: 16px; }
    #invoiceDetailModal .invoice-detail-split { flex-direction: column; }
    #invoiceDetailModal .invoice-detail-facts,
    #invoiceDetailModal .invoice-detail-comments { flex: 1 1 auto; width: 100%; max-width: 100%; }
    #invoiceDetailModal #invoiceDetailBody { padding-bottom: 72px; }
    #invoiceDetailModal #invoiceStageActions:not(:empty) {
        position: fixed; left: 0; right: 0; bottom: calc(var(--mob-bar-h) + env(safe-area-inset-bottom, 0px));
        z-index: 1350; margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--wc-glass-strong, rgba(255,255,255,0.96)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0,0,0,0.10); box-shadow: 0 -4px 18px rgba(20,40,55,0.12);
    }
    /* Ряды решения - каждый одной строкой с прокруткой вбок: иначе
       кнопки переносятся и полоса занимает пол-экрана. Сама полоса не
       выше трети экрана, остальное - прокруткой внутри неё. */
    #invoiceDetailModal #invoiceStageActions:not(:empty) { max-height: 34vh; overflow-y: auto; }
    #invoiceDetailModal #invoiceStageActions:not(:empty) > div {
        display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px;
        align-items: center; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    #invoiceDetailModal #invoiceStageActions:not(:empty) > div::-webkit-scrollbar { display: none; }
    #invoiceDetailModal #invoiceStageActions:not(:empty) > div > * { flex: 0 0 auto; margin-left: 0 !important; }
    #invoiceDetailModal #invoiceStageActions:not(:empty) > div:empty { display: none !important; }
    #invoiceDetailModal #invoiceStageActions:not(:empty) .btn-decision-yes,
    #invoiceDetailModal #invoiceStageActions:not(:empty) .btn-decision-no { min-height: 44px; font-size: 16px; padding: 8px 14px; }
    /* ползунок ширины комментариев на телефоне не нужен */
    #invoiceDetailModal .invoice-detail-resizer { display: none; }
}

/* ============================================================
   АДАПТАЦИЯ, БЛОК 3 - ОСТАЛЬНЫЕ ОКНА НА ТЕЛЕФОНЕ (01.10.2026).

   Таблицы шире экрана едут вбок внутри своей коробки (mobile.js,
   wrapWideTables), первый столбец закреплён слева - видно, к какой
   строке относятся числа. Формы (новая заявка, настройки) идут в одну
   колонку, поля во всю ширину. Вкладки внутри окон - одной строкой с
   прокруткой. На мониторе ничего из этого нет.
   ============================================================ */
@media (max-width: 768px) {
    .mob-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mob-tscroll > table { min-width: max-content; }

    /* первый столбец держится слева при прокрутке вбок */
    .mob-tscroll table > thead > tr > th:first-child,
    .mob-tscroll table > tbody > tr > td:first-child,
    .mob-tscroll-host table > thead > tr > th:first-child,
    .mob-tscroll-host table > tbody > tr > td:first-child,
    #tableTab .payment-table thead tr:first-child th:first-child,
    #tableTab .payment-table thead tr#paymentFilterRow th:first-child {
        position: sticky !important; left: 0 !important; z-index: 2;
        background: #fff; box-shadow: 1px 0 0 rgba(0,0,0,0.08);
    }
    .mob-tscroll table > thead > tr > th:first-child,
    .mob-tscroll-host table > thead > tr > th:first-child { z-index: 13; }

    /* формы - одна колонка, поля во всю ширину и покрупнее для пальца */
    .modal-body form, .modal-body .form-grid, .modal-body .inv-form-grid { display: block; }
    .modal-body .form-row, .modal-body .inv-form-row, .modal-body .avr-row, .modal-body .lz-f-row {
        display: flex; flex-direction: column; align-items: stretch; gap: 6px;
    }
    #invoiceDetailBody input[type="text"], #invoiceDetailBody input[type="number"],
    #invoiceDetailBody input[type="date"], #invoiceDetailBody select, #invoiceDetailBody textarea {
        width: 100%; max-width: 100%; box-sizing: border-box; font-size: 16px; min-height: 40px;
    }
    /* ряды «поле + кнопка/список» (сумма с валютой, ИНН с «Найти»)
       остаются одной строкой: поле тянется, спутник по содержимому */
    #invoiceDetailBody .inv-sum-row { display: flex; gap: 6px; }
    #invoiceDetailBody .inv-sum-row > input { flex: 1 1 auto; width: auto !important; min-width: 0; }
    #invoiceDetailBody .inv-sum-row > select, #invoiceDetailBody .inv-sum-row > button { flex: 0 0 auto; width: auto !important; }
    /* 16px у полей ввода - чтобы телефон не увеличивал страницу при наборе */
    .modal-body input, .modal-body select, .modal-body textarea { font-size: 16px; }
    .modal-body th input, .modal-body th select { font-size: 14px; min-height: 0; }

    /* вкладки внутри окон (банк, лизинг, сверка) - одной строкой */
    .modal-body .tab-row, .modal-body .sverka-tabs, .modal-body .lz-tabs, .modal-body .bank-tabs {
        display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; scrollbar-width: none;
    }
    .modal-body .tab-row::-webkit-scrollbar, .modal-body .sverka-tabs::-webkit-scrollbar { display: none; }
    .modal-body .tab-row > *, .modal-body .sverka-tabs > * { flex: 0 0 auto; white-space: nowrap; }

    /* плашки с итогами не должны вылезать за экран */
    #bankModal .bank-total-box,
    .modal-body .bank-total-box, .modal-body .rules-note, .modal-body .metric-card,
    .modal-body [class*="total-box"], .modal-body [class*="-sum"] {
        max-width: 100%; box-sizing: border-box; white-space: normal !important; overflow-wrap: anywhere;
    }
}

/* ============================================================
   Z-63. ДДС: ИЗ ЧЕГО СЛОЖИЛАСЬ СУММА (её выбор 30.09.2026, «а»).
   Суммы, по которым можно щёлкнуть, - с пунктиром; окно с операциями -
   то же .ask-confirm-overlay, что у окон-вопросов (dds.js, openDdsBreakdown).
   ============================================================ */
#ddsTable .dds-sum {
    cursor: pointer; text-decoration: underline dotted #0B6B82; text-underline-offset: 3px;
}
#ddsTable .dds-sum:hover { color: #0B6B82; }
.ask-confirm-box.dds-bd-box { max-width: 960px; width: calc(100% - 40px); }
.dds-bd-muted { color: #7A8A96; font-size: 14px; }
.dds-bd-warn { margin: 8px 0 0; }
.dds-bd-scroll { max-height: 60vh; overflow: auto; margin-top: 10px; }
.dds-bd-table { width: 100%; }
.dds-bd-table .dds-bd-th { cursor: pointer; user-select: none; white-space: nowrap; }
.dds-bd-table .num { text-align: right; }
.dds-bd-table .nowrap { white-space: nowrap; }
.dds-bd-table .dds-bd-purpose {
    max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dds-bd-tag {
    display: inline-block; border: 1px solid #9FD3DD; border-radius: 4px; padding: 0 5px;
    color: #0B4F5E; font-size: 14px;
}
.dds-bd-table tfoot .dds-bd-total td { font-weight: 700; border-top: 2px solid #0B6B82; }

/* ============================================================
   Z-67. ВОРОНКА ПРОДАЖ: «📄 Документы подписаны» в карточке отгруженной
   сделки (её выбор 01.10.2026, «а»; sales.js, openDealCard).
   ============================================================ */
.deal-signed-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.deal-signed-row label { display: inline-flex; gap: 6px; align-items: center; color: #425264; }
.deal-signed-row input[type="date"] { padding: 5px 6px; font: inherit; font-size: 14px; }
.deal-signed-row input[type="text"] {
    padding: 6px 8px; font: inherit; font-size: 14px; width: 280px; max-width: 100%;
    border: 1px solid #9FD3DD; border-radius: 6px;
}

/* ============================================================
   Z-68. СТРАХОВКИ: ВИД ПОЛИСА ОСАГО / КАСКО (её выбор 02.10.2026, «а»).
   Список в таблице «Страховки» окрашен в цвет вида; плашка - на вкладке
   «Ближайшие оплаты». Цвета - из палитры направлений «Моих контактов» (Z-13).
   ============================================================ */
.ins-kind { display: inline-block; border-radius: 6px; padding: 1px 8px; font-weight: 600; font-size: 14px; }
.ins-kind-osago { background: #E3EEF8; color: #1F5A8C; }
.ins-kind-kasko { background: #EFEDFB; color: #4B43A0; }
select.ins-kind-select { font-size: 14px; padding: 4px 6px; border-radius: 6px; }
select.ins-kind-select.ins-kind-osago, select.ins-kind-select.ins-kind-kasko { font-weight: 600; border-color: transparent; }

/* ============================================================
   Z-69. КАССА: КУПЮРНИК - узкая колонка справа от остатков (её выбор
   02.10.2026, «в»; bank.js, cashCounterHtml). На узком экране колонка
   уходит под остатки.
   ============================================================ */
.cash-top-grid { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.cash-top-main { flex: 1 1 420px; min-width: 0; }
.cash-top-main > .data-table { margin-bottom: 0 !important; }
.cash-counter {
    flex: 0 0 auto; border: 1px solid #9FD3DD; background: #F3FAFB; border-radius: 8px;
    padding: 6px 10px 8px; font-size: 14px;
}
.cash-counter-title { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #0B4F5E; margin-bottom: 4px; }
.cash-counter-grid { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 14px; }
.cash-counter-row { display: grid; grid-template-columns: 56px 52px 62px; gap: 5px; align-items: center; margin: 1px 0; }
.cash-counter-coins-row { grid-template-columns: 80px 80px; margin-top: 3px; }
.cash-counter-den { text-align: right; color: #0B4F5E; font-weight: 600; white-space: nowrap; }
.cash-counter-input {
    width: 52px; height: 24px; padding: 0 4px; text-align: center; font: inherit; font-size: 14px;
    border: 1px solid #9FD3DD; border-radius: 6px; background: #fff; -moz-appearance: textfield; box-sizing: border-box;
}
.cash-counter-coins { width: 80px; }
.cash-counter-input::-webkit-outer-spin-button, .cash-counter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cash-counter-input:focus { outline: 2px solid #0B6B82; outline-offset: 0; }
.cash-counter-rowsum { color: #7A8A96; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cash-counter-total { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-top: 5px; padding-top: 5px; border-top: 1px solid #C9E3EA; }
.cash-counter-total b { font-size: 16px; color: #0B4F5E; }
.cash-counter-org { width: 100%; margin-top: 4px; font-size: 14px; padding: 2px 4px; border: 1px solid #9FD3DD; border-radius: 6px; }
.cash-counter-diff { font-weight: 600; }
.cash-counter-diff.is-ok { color: #1A8348; }
.cash-counter-diff.is-bad { color: #C9403F; }
.cash-counter-clear {
    border: none; background: none; color: #0B6B82; font: inherit; font-size: 14px; font-weight: 400;
    cursor: pointer; padding: 0; text-decoration: underline dotted;
}

/* ============================================================
   ВОРОНКА ПРОДАЖ - КАНБАН (её выбор, вариант А, 27.10.2026).
   На плашке стадии крупно - сумма, мелко - число сделок; горит -
   метка на карточке (красная - просрочено, жёлтая - сегодня) и полоса
   слева. Карточки и плашки - цвета программы, без лишних рамок.
   ============================================================ */
.sales-doska { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.sales-kolonka { flex: 0 0 240px; min-width: 240px; }
.sales-plashka { border-radius: 8px; padding: 7px 10px; color: #0B2230; margin-bottom: 8px; }
.sales-plashka-n { display: flex; justify-content: space-between; gap: 6px; font-size: 14px; }
.sales-plashka-s { font-size: 19px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sales-plashka-d { font-size: 14px; color: #33434f; }
.sales-plashka-d.is-late { color: #a8322d; font-weight: 600; }
.sales-karta { background: #fff; border: 1px solid #dfe8ed; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px;
    font-size: 14px; cursor: pointer; }
.sales-karta:hover { border-color: #55b5be; }
.sales-karta.is-gorit { border-left: 4px solid #C9403F; }
.sales-karta.is-segodnya { border-left: 4px solid #e0a800; }
.sales-karta-k { font-weight: 400; font-size: 15px; color: #1f2d3a; }   /* контрагент - без жирного (правка 174) */
.sales-karta-sum { font-weight: 700; font-variant-numeric: tabular-nums; }
.sales-karta-m { color: #6b7c88; }
.sales-metka { display: inline-block; border-radius: 10px; padding: 0 8px; font-size: 14px; margin-top: 4px; line-height: 1.5; }
.sales-metka-gorit { background: #fbdcdc; color: #C9403F; }
.sales-metka-segodnya { background: #fff3d6; color: #8a5a00; }
/* Карточка сделки: поля по стадии, поиск контрагента */
.sales-forma { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.sales-forma .sales-shir { grid-column: 1 / -1; }
.sales-razdel { grid-column: 1 / -1; font-weight: 700; color: #0B6B82; border-bottom: 1px solid #dfe8ed; padding-bottom: 3px;
    margin-top: 6px; font-size: 15px; }
.sales-poisk { position: absolute; left: 0; right: 0; z-index: 30; background: #fff; border: 1px solid #dfe8ed; border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.sales-poisk-str { padding: 6px 10px; cursor: pointer; font-size: 14px; }
.sales-poisk-str:hover { background: #EAF7F9; }
.sales-otgruzka { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid #dfe8ed; border-radius: 8px; }
.sales-otgruzka input[type="text"] { padding: 6px 8px; font: inherit; font-size: 14px; }
.podskaz-sales { font-size: 14px; color: #6b7c88; }
/* Настройка воронки */
.sales-nastr .sales-razdel { margin: 14px 0 6px; }
.sales-nastr-tab td { vertical-align: middle; }
.sales-nastr-tab input[type="text"] { padding: 4px 6px; font: inherit; font-size: 14px; }
.sales-nastr-chislo { width: 70px; text-align: right; padding: 4px 6px; font: inherit; font-size: 14px; }
.sales-nastr-lyudi { display: flex; flex-wrap: wrap; gap: 6px 16px; }
@media (max-width: 700px) { .sales-forma { grid-template-columns: 1fr; } }

/* ============================================================
   ПЛАТЁЖНЫЙ КАЛЕНДАРЬ: «✅ СВЕРЕНО» / «❌ НЕ ТОТ» (её выбор 04.10.2026).
   Светлые кнопки - цвет только у текста и рамки (как в образце, вариант 1).
   Ячейка «Оплата» по ширине содержимого: кончается сразу за последней
   кнопкой, текст не переносится, строка не растёт.
   ============================================================ */
#tableTab .payment-table td.cal-pay-cell { white-space: nowrap; width: 1%; word-break: normal; }
.cal-pay-flex { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.cal-pay-btn { height: 28px; padding: 0 9px; border-radius: 6px; background: #fff; font-size: 14px; font-weight: 600;
    line-height: 26px; cursor: pointer; white-space: nowrap; }
.cal-pay-yes { border: 1px solid #1A8348; color: #1A8348; }
.cal-pay-no  { border: 1px solid #C9403F; color: #C9403F; }
.cal-pay-yes:hover { background: #e6f4ec; }
.cal-pay-no:hover  { background: #fbe9e9; }
/* у зелёной строки «❌ Не тот» - только при наведении на саму ячейку */
.cal-pay-hover { visibility: hidden; }
#tableTab .payment-table td.cal-pay-cell:hover .cal-pay-hover,
.cal-pay-hover:focus { visibility: visible; }
/* значок причины жёлтой строки и подсказка к нему */
.cal-why { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px;
    border-radius: 50%; background: #fff; border: 1px solid #d99a00; color: #9a6412; font-size: 14px; font-weight: 700;
    cursor: help; }
.cal-why-tip { display: none; position: fixed; z-index: 6000; max-width: 360px; padding: 7px 10px; background: #fff;
    color: #1a2634; border: 1px solid #9FD3DD; border-radius: 8px; box-shadow: 0 4px 14px rgba(11,79,94,.18);
    font-size: 14px; line-height: 1.4; white-space: normal; pointer-events: none; }

/* ============================================================
   ПРОЕКТЫ → «📈 ПРОГНОЗ» (её выбор 04.10.2026: «А и В вместе», график
   снизу, доработки ①-⑤). Разметка - projects.js (_renderProjectForecastTab,
   _projectForecastTileHtml, _prjForecastChartSvg).
   ============================================================ */
#projectsModal .prj-tile-link { cursor: pointer; }
#projectsModal .prj-tile-link:hover { border-color: #0B6B82; }
#projectsModal .prj-forecast-scroll { overflow-x: auto; }
#projectsModal .prj-forecast-table { background: #fff; font-variant-numeric: tabular-nums; }
#projectsModal .prj-forecast-table .prj-num { text-align: right; white-space: nowrap; }
#projectsModal .prj-forecast-table .prj-center { text-align: center; }
#projectsModal .prj-forecast-table tfoot td { font-weight: 700; border-top: 2px solid #0B6B82; }
#projectsModal .prj-art { background: none; border: 0; padding: 0; font: inherit; color: #0B4F5E; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 3px; }
#projectsModal .prj-lbl { font-size: 14px; border-radius: 8px; padding: 0 7px; margin-left: 6px; white-space: nowrap;
    background: #fbe4e4; color: #b13e3e; font-weight: 600; }
#projectsModal .prj-lbl-late { background: #fdf3d7; color: #8a5a00; }
#projectsModal .prj-row-out td { background: #fff5f5; }
#projectsModal .prj-row-closed td { color: #7c8899; }
#projectsModal .prj-dev { display: inline-block; border-radius: 10px; padding: 1px 9px; font-weight: 600; font-size: 14px; }
#projectsModal .prj-dev-ok { background: #e3f4ea; color: #1d7240; }
#projectsModal .prj-dev-bad { background: #fbe4e4; color: #b13e3e; }
#projectsModal .prj-ops-row td { background: #f6fbfc; padding: 6px 10px 8px 28px; }
#projectsModal .prj-ops { border-collapse: collapse; width: 100%; font-size: 14px; }
#projectsModal .prj-ops td { border: 0; padding: 2px 8px; background: transparent; }
#projectsModal .prj-forecast-alert { margin-top: 10px; background: #fdf3d7; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
#projectsModal .prj-forecast-alert.is-bad { background: #fbe4e4; }
#projectsModal .prj-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: #0B4F5E; margin-bottom: 6px; }
#projectsModal .prj-legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 5px; }
#projectsModal .prj-legend .prj-legend-dash { height: 0; border-top: 3px dashed #d99a00; }
#projectsModal .prj-chart { display: block; min-width: 600px; background: #fff; border-radius: 8px; }
#projectsModal .prj-chart text { font-size: 14px; }
/* серый - только подписям без своего цвета: подписи «сейчас», «предел», итог раскрашены атрибутом fill */
#projectsModal .prj-chart text:not([fill]) { fill: #5d6b7a; }

/* ============================================================
   ПРОЕКТЫ → «💵 ДЕНЬГИ ПО МЕСЯЦАМ» (её выбор 04.10.2026: «вариант В с
   графиком А»). Разметка - projects.js (_renderProjectMoneyTab,
   _prjMoneyChartSvg). Общие классы (.prj-tiles, .prj-forecast-scroll,
   .prj-forecast-alert, .prj-legend, .prj-chart) - из «📈 Прогноза».
   ============================================================ */
#projectsModal .prj-modes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 14px; margin-bottom: 10px; }
#projectsModal .prj-money-table { background: #fff; font-variant-numeric: tabular-nums; }
#projectsModal .prj-money-table th, #projectsModal .prj-money-table td { white-space: nowrap; }
#projectsModal .prj-money-table .prj-num { text-align: right; }
#projectsModal .prj-money-table th .prj-src { display: block; }
#projectsModal .prj-money-table .prj-fut { background: #f6fbfc; }
#projectsModal .prj-money-table .prj-neg { background: #fbe4e4; color: #b13e3e; }
#projectsModal .prj-money-table .prj-fut.prj-neg { background: #fbe9e9; }
#projectsModal .prj-money-table tr.prj-cum td { font-weight: 700; border-top: 2px solid #0B6B82; }
#projectsModal .prj-money-table th.prj-open { box-shadow: inset 0 -3px 0 #0B6B82; }
#projectsModal .prj-inc { color: #1d7240; }
#projectsModal .prj-exp { color: #b13e3e; }
#projectsModal .prj-month { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #0B4F5E;
    cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ============================================================
   ПРОЕКТЫ → ABC (её выбор «в» 04.10.2026: вкладка «🔤 ABC затрат» и
   ABC по марже на обзоре). Разметка - projects.js (_renderProjectAbcTab,
   _renderProjectsMarginAbcHtml). Цвета букв - как в «От кого мы зависим».
   ============================================================ */
#projectsModal .prj-abc-seg { display: inline-flex; border: 1px solid #0B6B82; border-radius: 8px; overflow: hidden; margin-bottom: 10px; }
#projectsModal .prj-abc-seg button { border: 0; background: #fff; padding: 4px 12px; font-size: 14px; color: #0B4F5E; cursor: pointer; }
#projectsModal .prj-abc-seg button + button { border-left: 1px solid #0B6B82; }
#projectsModal .prj-abc-seg button.is-on { background: #0B6B82; color: #fff; }
#projectsModal .prj-abc-note { background: #E0F2F6; border: 1px solid #9FD3DD; border-radius: 8px; padding: 8px 12px;
    color: #0B4F5E; font-size: 14px; margin-bottom: 10px; }
#projectsModal .prj-abc-table { background: #fff; font-variant-numeric: tabular-nums; }
#projectsModal .prj-abc-table .prj-num { text-align: right; white-space: nowrap; }
#projectsModal .prj-abc-g { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 6px; font-weight: 700; font-size: 14px; margin-right: 6px; }
#projectsModal .prj-abc-gA { background: #e3f4ea; color: #1a7f37; }
#projectsModal .prj-abc-gB { background: #fdf3d7; color: #8a6d3b; }
#projectsModal .prj-abc-gC { background: #eef1f3; color: #5d6b7a; }
#projectsModal .prj-abc-gL { background: #fbe4e4; color: #b13e3e; }
#projectsModal .prj-abc-bar { height: 10px; min-width: 120px; background: #eef4f6; border-radius: 5px; overflow: hidden; }
#projectsModal .prj-abc-bar span { display: block; height: 100%; }

/* ИНН В ЯЧЕЙКЕ РЕЕСТРА (её «а» 05.10.2026): вписывается прямо здесь.
   Пустой или неверный - красная рамка, как «нельзя» в строке. */
#invoicesBoard .reestr-inn { width: 100%; min-width: 0; box-sizing: border-box; padding: 2px 4px; font-size: 14px;
    border: 1px solid #c9d6dc; border-radius: 4px; background: #fff; font-variant-numeric: tabular-nums; }
#invoicesBoard .reestr-inn.reestr-inn-bad { border-color: #c0392b; }
#invoicesBoard .reestr-inn:focus { outline: none; border-color: #1f6f8b; box-shadow: 0 0 0 2px rgba(31, 111, 139, 0.15); }

/* Комментарий для бухгалтерии из формы заявки - отдельной строкой под полем
   карточки, когда в карточке написано другое (её правка 05.10.2026). */
#invoiceDetailModal .inv-form-comment { font-size: 14px; color: #425264; margin-top: 4px; max-width: 520px; white-space: pre-wrap; }

/* «СОГЛАСОВАТЬ» И «ОТКЛОНИТЬ» В КАРТОЧКЕ - БЕЛЫЕ (её «а» 05.10.2026:
   «убери цвет с кнопок»). Решение узнаётся по значку ✅ / ❌ и тексту;
   сплошная зелёная заливка притягивала руку, и случайные «согласовать»
   уже были. Только ряд решения в карточке; доска - как была. Под мышью -
   рамка цветом решения, чтобы было видно, что нажмёшь. */
#invoiceDetailModal #invoiceDecisionRow .btn-decision-yes,
#invoiceDetailModal #invoiceDecisionRow .btn-decision-no {
    background: var(--surface, #fff) !important;
    border: 1.5px solid var(--line-2, #dce7ea) !important;
    color: var(--ink, #1f2a3e) !important;
    font-weight: 600;
    box-shadow: none;
}
#invoiceDetailModal #invoiceDecisionRow .btn-decision-yes:hover:not(:disabled) { border-color: var(--ok, #1f7a4d) !important; background: #f3faf6 !important; }
#invoiceDetailModal #invoiceDecisionRow .btn-decision-no:hover:not(:disabled) { border-color: var(--bad, #b3261e) !important; background: #fdf3f2 !important; }

/* АВАНС-ЛИСТ, «ИТОГ» ПО МЕСЯЦАМ (её «а» 05.10.2026). */
#listModal .avans-grid-wrap { overflow: auto; }
#listModal .avans-grid th.avans-r, #listModal .avans-grid td.avans-r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#listModal .avans-grid td.avans-net { text-align: center; background: #fdecea; color: #c0392b; }
#listModal .avans-grid td.avans-do-ostatkov { color: #9aa7b6; }
#listModal .avans-grid .avans-nomera { font-size: 14px; color: #5b6b7c; }
/* Две строки на контрагента - «оплачено» / «закрыто» (её «а» 07.10.2026). */
#listModal .avans-grid td.avans-name { vertical-align: top; }
/* Первый столбец уже (её правка 07.10.2026: «слишком широкий столбик с
   контрагентами»): название переносится, лишняя ширина уходит месяцам. */
#listModal .avans-grid th:first-child, #listModal .avans-grid td.avans-name { width: 230px; max-width: 230px; overflow-wrap: anywhere; }
#listModal .avans-grid .avans-sub { font-size: 14px; color: #5b6b7c; }
#listModal .avans-grid td.avans-kind { color: #5b6b7c; white-space: nowrap; }
#listModal .avans-grid td.avans-pusto { color: #9aa7b6; }
/* «ИТОГИ» АВАНС-ЛИСТА - ВИД (её правка 07.10.2026: «форматирование
   хромает на всех вкладках»). Контрагент (договор) - свой <tbody
   class="avans-blok"> из двух строк; под мышью светло-голубым весь блок
   целиком (обе строки и название), без рамок выделения и без зебры -
   раньше общая подсветка строки красила половину блока, а щелчок рисовал
   рамку. Столбцы месяцев - равной ширины. */
#listModal .avans-grid { table-layout: fixed; width: 100%; }
#listModal .avans-grid th:nth-child(2) { width: 90px; }
#listModal .avans-grid th:last-child { width: 140px; }
/* Цвета - переменными: общий цвет «под мышью» (--row-hover-soft) и свои
   смысловые (красная клетка, строка лизингодателя). Щелчок по строке
   рамку здесь не рисует - rowselect.js пропускает таблицу итогов. */
#listModal .avans-grid { --avans-net-fon: #fdecea; --lz-lessor-fon: #f3f7f9; --lz-nad-fon: #eaf5f9; }
#listModal .avans-grid tbody tr > td,
#listModal .avans-grid tbody tr:hover > td { background-color: transparent !important; box-shadow: none !important; }
#listModal .avans-grid tbody.avans-blok:hover > tr > td { background-color: var(--row-hover-soft, #eaf7f9) !important; }
#listModal .avans-grid tbody.avans-blok > tr > td.avans-net,
#listModal .avans-grid tbody.avans-blok:hover > tr > td.avans-net { background-color: var(--avans-net-fon) !important; }
#listModal .avans-grid tbody tr.lz-lessor > td,
#listModal .avans-grid tbody tr.lz-lessor:hover > td { background-color: var(--lz-lessor-fon) !important; border-bottom: 1px solid #dce7ea; }
#listModal .avans-grid td.lz-bez { color: #5b6b7c; }
#listModal .avans-grid .lz-sbros { background: #fff; border: 1px solid #dce7ea; border-radius: 6px; padding: 1px 8px; font-size: 14px; cursor: pointer; margin-left: 8px; color: #1a2634; }
/* Перетаскивание сумм мышкой (её выбор «б»). */
#listModal .avans-grid .lz-doc { display: block; margin-left: auto; width: fit-content; font-weight: 700; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; }
#listModal .avans-grid .lz-doc[draggable="true"] { cursor: grab; }
#listModal .avans-grid .lz-doc[draggable="true"]:hover { border-color: #9fc8d8; background: #eaf5f9; }
#listModal .avans-grid .lz-doc.lz-svob { background: #eaf5f9; border-color: #9fc8d8; }
/* Перенесённая вручную сумма - как обычная (её «а» 07.10.2026: «когда платёж уже
   перенесён, он должен выглядеть как обычный, а то режет глаз»). Отличие - только в
   подсказке «отнесён вручную» и в подсветке под мышью, как у любой суммы. */
#listModal .avans-grid .lz-doc.lz-ruch { background: transparent; border-color: transparent; }
#listModal .avans-grid .lz-ost { font-weight: 400; color: #5b6b7c; font-size: 14px; }
#listModal .avans-grid .lz-tashat { opacity: .45; }
#listModal .avans-grid td.lz-mozhno { outline: 2px dashed #9fc8d8; outline-offset: -3px; }
#listModal .avans-grid tbody.avans-blok:hover > tr > td.lz-nad, #listModal .avans-grid tbody > tr > td.lz-nad.lz-nad.lz-nad { outline: 2px solid #2e86ab; outline-offset: -3px; background-color: var(--lz-nad-fon) !important; color: #1a2634; }
#listModal .avans-grid .lz-predv { display: block; font-size: 14px; }
#listModal .avans-grid .lz-plus { color: #2e86ab; font-weight: 600; }
#listModal .avans-grid .lz-ostanetsya { color: #5b6b7c; }
#listModal .avans-grid td.avans-ostatok { vertical-align: middle; }
#listModal .avans-grid tr.avans-row-doc td, #listModal .avans-grid td.avans-name, #listModal .avans-grid td.avans-ostatok { border-bottom: 2px solid #dce7ea; }

/* «ИНН с ошибкой» в окне «Похожее название — другой ИНН» (её правка 07.10.2026). */
.reestr-inn-oshibka { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: #fdecea; color: #c0392b; font-size: 14px; white-space: nowrap; }

/* Страховки: удаление - мусоркой, а не крестиком «закрыть» (её правка 08.10.2026). */
#autoFinesInsuranceWrap .btn-delete-row.ins-trash { background: #fff; border: 1px solid #dce7ea; border-radius: 8px; padding: 2px 8px; font-size: 16px; line-height: 1.4; cursor: pointer; color: inherit; }
#autoFinesInsuranceWrap .btn-delete-row.ins-trash:hover { border-color: #e0a8a1; background: #fdecea; }
/* Страховки: сортировка и поиск по шапке (её правка 08.10.2026). Вид - её
   правка 08.10.2026 (образец obrazcy_strahovki_kak_excel): белая таблица как
   в Excel, пишут прямо в любую клетку, клетка с курсором обведена голубым. */
#autoFinesInsuranceWrap { --ins-setka: #c5d7de; --ins-pole: #fff; --ins-pole-mysh: #fff; --ins-fokus: #2e86ab; }
#autoFinesInsuranceWrap .ins-grid { border-collapse: collapse; width: 100%; }
#autoFinesInsuranceWrap .ins-grid th, #autoFinesInsuranceWrap .ins-grid td { border: 1px solid var(--ins-setka); }
#autoFinesInsuranceWrap #insuranceTable th { vertical-align: top; white-space: normal; }
#autoFinesInsuranceWrap #insuranceTable .ins-sort { cursor: pointer; display: block; margin-bottom: 4px; }
#autoFinesInsuranceWrap #insuranceTable .filter-input { display: block; width: 100%; min-width: 60px; font-size: 14px; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole { padding: 0; background: var(--ins-pole); }
#autoFinesInsuranceWrap .ins-grid tr:hover td.ins-pole { background: var(--ins-pole-mysh); }
#autoFinesInsuranceWrap .ins-grid td.ins-pole:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--ins-fokus); }
#autoFinesInsuranceWrap .ins-grid td.ins-pole input:not([type="checkbox"]),
#autoFinesInsuranceWrap .ins-grid td.ins-pole select { width: 100%; height: 44px; margin: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; font: inherit; font-size: 15px; color: #1a2634; padding: 0 10px; outline: none; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 26px;
    background-image: linear-gradient(45deg, transparent 50%, #8a98a8 50%), linear-gradient(135deg, #8a98a8 50%, transparent 50%);
    background-position: calc(100% - 14px) 20px, calc(100% - 9px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole select.ins-kind-osago { color: #1F5A8C; font-weight: 600; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole select.ins-kind-kasko { color: #4B43A0; font-weight: 600; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole input::placeholder { color: #9aa7b6; }
#autoFinesInsuranceWrap .ins-grid td.ins-pole input.ins-sum { text-align: right; }
#autoFinesInsuranceWrap .ins-grid td.ins-ro { padding: 8px 10px; background: #fff; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(1) { width: 124px; min-width: 124px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(2) { width: 108px; min-width: 108px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(3) { width: 138px; min-width: 138px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(4) { width: 118px; min-width: 118px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(5) { min-width: 130px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(6) { min-width: 150px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(7) { min-width: 100px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(8) { min-width: 105px; }
#autoFinesInsuranceWrap #insuranceTable td:nth-child(9) { min-width: 100px; }
#autoFinesInsuranceWrap #insuranceTable td.ins-pole input.ins-sum { padding: 0 8px; }
/* Строка = оплата (её правка 08.10.2026, образец obrazcy_strahovki_skryvat_oplachennye).
   Последняя клетка - два места одинаковой ширины («готово» / «оплачено» и 🗑),
   чтобы всё стояло ровно в столбик (её правка: «гармонично, не вразброс»). */
#autoFinesInsuranceWrap .ins-panel { padding: 8px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#autoFinesInsuranceWrap .ins-show-paid.active { border-color: #2e86ab; color: #2e86ab; background: #eaf5f9; }
#autoFinesInsuranceWrap .ins-grid td.ins-dej { width: 1%; white-space: nowrap; padding: 0 8px; background: #fff; }
#autoFinesInsuranceWrap .ins-grid .ins-dej-slot { display: inline-flex; align-items: center; width: 90px; height: 44px; vertical-align: middle; }
#autoFinesInsuranceWrap .ins-grid td.ins-dej .ins-trash { vertical-align: middle; }
#autoFinesInsuranceWrap .ins-grid td.ins-dej .cal-draft-done { margin-right: 0; }
#autoFinesInsuranceWrap .ins-chip { display: inline-block; font-size: 14px; border-radius: 6px; padding: 1px 8px; white-space: nowrap; }
#autoFinesInsuranceWrap .ins-chip-paid { background: #eef1f4; color: #6c7a89; }
#autoFinesInsuranceWrap .ins-grid tr.ins-draft > td { background: #fff4c2; }
#autoFinesInsuranceWrap .ins-grid tr.ins-draft > td:first-child { box-shadow: inset 4px 0 0 #e6c84f; }
#autoFinesInsuranceWrap .ins-grid tr.ins-auto > td:first-child { box-shadow: inset 3px 0 0 #1a8348; }
#autoFinesInsuranceWrap .ins-grid tr.ins-paid td input:not([type="checkbox"]), #autoFinesInsuranceWrap .ins-grid tr.ins-paid td select { color: #8593a2; }
#autoFinesInsuranceWrap .ins-grid tr.ins-overdue td.ins-data { background: #fdecea; }
#autoFinesInsuranceWrap .ins-grid tr.ins-overdue td.ins-data input { color: #c0392b; font-weight: 700; }
#autoFinesInsuranceWrap .ins-grid tr.ins-soon td.ins-data input { color: #b36b00; font-weight: 700; }
#autoFinesInsuranceWrap .ins-grid td.ins-pusto { text-align: center; padding: 16px; color: #5b6b7c; }
.ins-dlg { position: fixed; inset: 0; background: rgba(15, 40, 50, .35); display: flex; align-items: center; justify-content: center; z-index: 3000; }
.ins-dlg-box { background: #fff; border-radius: 14px; padding: 18px 20px; width: 440px; max-width: calc(100vw - 32px); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.ins-dlg-box h3 { margin: 0 0 6px; font-size: 17px; color: #0f5866; }
.ins-dlg-box p { margin: 0 0 14px; font-size: 14px; color: #5b6b7c; }
.ins-dlg-box .btn { display: block; width: 100%; margin: 0 0 8px; text-align: left; font-size: 14px; }
.ins-dlg-box .ins-dlg-all { color: #c0392b; }

/* Аванс-лист: период итогов справа от вкладок (её «а» 08.10.2026, образец
   obrazcy_avans_period) и столбец «Итого за период». */
#avansTabsRow { align-items: center; }
#avansTabsRow .avans-period { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
#avansTabsRow .avans-period-metka { font-size: 14px; color: #5b6b7c; }
#avansTabsRow .avans-period-knopki { display: inline-flex; background: #fff; border: 1px solid #dce7ea; border-radius: 10px; overflow: hidden; }
#avansTabsRow .avans-period-knopki button { border: none; border-right: 1px solid #dce7ea; background: transparent; font: inherit; font-size: 14px; padding: 6px 12px; cursor: pointer; color: #1a2634; }
#avansTabsRow .avans-period-knopki button:last-child { border-right: none; }
#avansTabsRow .avans-period-knopki button.akt { background: #eaf5f9; color: #2e86ab; font-weight: 600; }
#listModal .avans-grid th.avans-itogo, #listModal .avans-grid td.avans-itogo { background: #f3f7f9; font-weight: 600; }
#listModal .avans-grid th.avans-itogo { width: 140px; }

/* ============================================================
   ПРОДАНО ПО МЕСЯЦАМ: СЕТКА, КАК В ЭКСЕЛЕ (её выбор 10.10.2026,
   образец obrazcy_prodano_tablica, вариант «б»; её слова: «убери все
   эти округлые углы, плашки, нечёткий шрифт. нужна чёткая таблица,
   без визуального шума»). Одна таблица: строки - товары, колонки -
   месяцы. Квадратные углы, каждая клетка в рамке, шапка и итог светлым
   фоном, клетки себестоимости чуть подкрашены, поля ввода - сама клетка
   без рамки и скругления. Не .data-table: у неё скругления полей и
   полоски-разделители в шапке.
   ============================================================ */
.mpg-wrap { display: block; width: 100%; }   /* на всю ширину окна (её правка 11.10.2026) */
.mpg-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; font-size: 14px; color: #1c2b30; }
.mpg-bar a { color: #0B6B82; text-decoration: none; border-bottom: 1px dotted #0B6B82; }
.mpg-bar b { color: #1c2b30; }
.mpg-bar .mpg-btn { margin-left: auto; }
.mpg-scroll { overflow: auto; }
table.mp-grid {
    /* На всю ширину окна (её правка 11.10.2026: «эту таблицу нужно растянуть на весь экран»). */
    width: 100%;
    border-collapse: collapse; border: 1px solid #A9C9D1; background: #fff;
    font-size: 14px; color: #1c2b30; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}
table.mp-grid th, table.mp-grid td {
    border: 1px solid #C9DDE2; padding: 7px 10px; white-space: nowrap; text-align: right;
    border-radius: 0; line-height: 1.35;
}
table.mp-grid thead th {
    background: #F3F8F9; color: #0B4F5E; font-weight: 600; border-bottom: 2px solid #0B6B82;
    position: sticky; top: 0; z-index: 2; text-transform: none; letter-spacing: normal; font-size: 14px;
}
table.mp-grid thead th::after { content: none !important; display: none !important; }
table.mp-grid .mpg-t { text-align: left; }
table.mp-grid .mpg-stick { position: sticky; left: 0; z-index: 1; background: #fff; }
table.mp-grid thead th.mpg-stick { z-index: 3; background: #F3F8F9; }
table.mp-grid .mpg-first { border-left: 2px solid #0B6B82; }
table.mp-grid .mpg-b { font-weight: 600; }
table.mp-grid col.mpg-c-name { width: 300px; }
table.mp-grid col.mpg-c-seb { width: 112px; }
table.mp-grid col.mpg-c-m { width: 104px; }
table.mp-grid col.mpg-c-tot { width: 112px; }
/* строка под мышью - общим правилом в конце файла (#EAF7F9, как везде) */
table.mp-grid tr.mpg-itogo td { border-top: 2px solid #0B6B82; background: #F3F8F9; font-weight: 600; }
/* себестоимость - сама клетка: без рамки, без скругления, подкрашена */
table.mp-grid td.mpg-seb { padding: 0; background: #F7FBFC; }
table.mp-grid td.mpg-seb input,
table.mp-grid td.mpg-in input,
table.mp-grid td.mpg-in select {
    width: 100%; height: 34px; box-sizing: border-box; margin: 0;
    border: 0 !important; border-radius: 0 !important; background: transparent; box-shadow: none !important;
    font: inherit; color: #1c2b30; padding: 0 10px; text-align: right; outline: none;
}
table.mp-grid td.mpg-seb.mpg-carried input { color: #7c8899; }
table.mp-grid td.mpg-seb:focus-within,
table.mp-grid td.mpg-in:focus-within { box-shadow: inset 0 0 0 2px #0B6B82; background: #fff; }
table.mp-grid td.mpg-seb input::-webkit-outer-spin-button,
table.mp-grid td.mpg-seb input::-webkit-inner-spin-button,
table.mp-grid td.mpg-in input::-webkit-outer-spin-button,
table.mp-grid td.mpg-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.mp-grid td.mpg-seb input, table.mp-grid td.mpg-in input { -moz-appearance: textfield; }
/* строка ввода розницы */
table.mp-grid tr.mpg-entry td { background: #F7FBFC; }
table.mp-grid tr.mpg-entry td.mpg-in { padding: 0; }
table.mp-grid tr.mpg-entry td.mpg-t input { text-align: left; }
table.mp-grid tr.mpg-entry td.mpg-in select { text-align: left; }
table.mp-grid tr.mpg-entry td.mpg-add { text-align: left; }
table.mp-grid tr.mpg-entry td.mpg-add a { color: #0B6B82; font-weight: 600; text-decoration: none; }

/* ============================================================
   ПРОЕКТ В ЗАДАЧАХ (её выбор 15.10.2026, вариант А). Как таблица Excel:
   строки с тонкой линией, без заливок; цвета FinMan.
   ============================================================ */
.task-group-block { border: 1px solid #C9D6DA; border-radius: 8px; padding: 10px 12px; margin: 10px 0; background: #fff; }
.task-group-head { font-weight: 600; color: #0B4F5E; margin-bottom: 6px; }
.task-group-people { font-weight: 400; color: #5a6472; }
.task-group-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #E3EAEC; font-size: 14px; }
.task-group-row:last-of-type { border-bottom: none; }
.task-group-row input[type="checkbox"] { width: auto; margin: 0; }
.task-group-row a { color: #1F2D33; text-decoration: none; }
.task-group-row a:hover { color: #0B6B82; text-decoration: underline; }
.task-group-row.done a { color: #7C9CA4; text-decoration: line-through; }
.task-group-who { margin-left: auto; color: #7C9CA4; white-space: nowrap; font-size: 14px; }
.task-group-actions { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.task-group-actions .btn-link { background: none; border: none; color: #0B6B82; text-decoration: underline; cursor: pointer; padding: 4px 6px; }
.task-group-in { margin: 8px 0; color: #5a6472; }
.task-group-in a { color: #0B6B82; }
.task-group-make { margin: 8px 0; }
.task-group-tag { color: #0B6B82; }
span.task-group-tag { cursor: pointer; text-decoration: underline; }
.task-comment-to-task { font-size: 14px; color: #0B6B82; }

/* ============================================================
   АНАЛИЗ → ИТОГОВАЯ ТАБЛИЦА: СТАТЬЯ - ОДНИМ БЛОКОМ (её правка 15.10.2026:
   «посмотри, как криво выделяются строки»). Под мышью светлеет весь блок
   План + Факт, щелчок обводит его целиком рамкой того же цвета, что
   выделение строки везде (#0B6B82). Итого - первым столбцом, жирно.
   ============================================================ */
#analysisModal .an-grid tbody.an-blok > tr > td { background-color: #fff !important; box-shadow: none !important; }
#analysisModal .an-grid tbody.an-blok > tr:last-child > td,
#analysisModal .an-grid tbody.an-blok > tr > td.an-name { border-bottom: 2px solid #dfe6ec; }
#analysisModal .an-proverka { border: 1px solid #C9D6DA; border-radius: 8px; background: #fff; padding: 10px 12px; margin: 0 0 10px; }
#analysisModal .an-proverka-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: #0B4F5E; }
/* Выходные и праздники (её правка 15.10.2026): серо-голубой и светло-розовый. */
#analysisModal .an-grid th.an-vyh, #analysisModal .an-grid tbody.an-blok > tr > td.an-vyh { background-color: #EEF2F5 !important; }
#analysisModal .an-grid th.an-prazd, #analysisModal .an-grid tbody.an-blok > tr > td.an-prazd { background-color: #FBEAEA !important; }
#analysisModal .an-grid th .an-dn { font-weight: 400; font-size: 14px; color: #7C9CA4; }
#analysisModal .an-legenda span { padding: 1px 8px; border-radius: 3px; margin-left: 4px; }
#analysisModal .an-legenda .an-vyh { background: #EEF2F5; }
#analysisModal .an-legenda .an-prazd { background: #FBEAEA; }
#analysisModal .an-grid tbody.an-blok:hover > tr > td { background-color: var(--row-hover-soft, #eaf7f9) !important; }
#analysisModal .an-grid tbody.an-blok > tr > td.an-over { color: #e74c3c; font-weight: bold; background-color: #fdecea !important; }
#analysisModal .an-grid td.an-itogo { background-color: #f6fafb !important; }
#analysisModal .an-grid tbody.an-blok-vybran > tr:first-child > td { box-shadow: inset 0 2px 0 #0B6B82 !important; }
#analysisModal .an-grid tbody.an-blok-vybran > tr:last-child > td { box-shadow: inset 0 -2px 0 #0B6B82 !important; }
#analysisModal .an-grid tbody.an-blok-vybran > tr:first-child > td.an-name { box-shadow: inset 3px 0 0 #0B6B82, inset 0 2px 0 #0B6B82, inset 0 -2px 0 #0B6B82 !important; }
#analysisModal .an-grid tbody.an-blok-vybran > tr:first-child > td:last-child { box-shadow: inset 0 2px 0 #0B6B82, inset -3px 0 0 #0B6B82 !important; }
#analysisModal .an-grid tbody.an-blok-vybran > tr:last-child > td:last-child { box-shadow: inset 0 -2px 0 #0B6B82, inset -3px 0 0 #0B6B82 !important; }
#analysisModal .an-grid tbody.an-razdel > tr > td { background: #eef2f7 !important; box-shadow: none !important; }

/* ============================================================
   ОПиУ: РЕШЕНИЯ ПО ПЛАТЕЖАМ И РБП (её выбор 15.10.2026, вариант А).
   Таблицы как в Excel, без лишних заливок.
   ============================================================ */
#ozonModal .opiu-resh-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
#ozonModal .opiu-resh-table td { vertical-align: middle; }
#ozonModal .opiu-resh-table td:nth-child(2) { white-space: nowrap; }
#ozonModal .opiu-resh-table td.opiu-resh-nazn { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ozonModal .opiu-resh-sel { padding: 3px 6px; border: 1px solid #C9D6DA; border-radius: 4px; background: #fff; }
#ozonModal .opiu-resh-tag { color: #0B6B82; font-size: 14px; }
#ozonModal .opiu-resh-wait { color: #B26A00; font-size: 14px; }
#ozonModal .opiu-resh-zap { margin-left: 8px; font-size: 14px; color: #425264; white-space: nowrap; }
#ozonModal .opiu-resh-zap input { width: auto; }
#ozonModal tr.opiu-resh-ne > td { color: #7C9CA4; }
#ozonModal .opiu-pravila { border: 1px solid #C9D6DA; border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
#ozonModal .opiu-pravila-title { font-weight: 600; color: #0B4F5E; margin-bottom: 6px; }
#ozonModal .opiu-pravila-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
#ozonModal .opiu-rbp-forma { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
#ozonModal .opiu-rbp-forma label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
#ozonModal tr.opiu-rbp-itog > td { font-weight: 700; background: #F3F7F8 !important; }

/* Аванс-лист: платежи месяца по щелчку (её правка 15.10.2026). */
#listModal .avans-grid td.avans-klik { cursor: pointer; text-decoration: underline dotted #7C9CA4; }
.avans-pop { display: none; position: fixed; z-index: 3000; left: 50%; top: 18%; transform: translateX(-50%); width: min(860px, calc(100vw - 32px));
    max-height: 64vh; overflow: auto; background: #fff; border: 1px solid #C9D6DA; border-radius: 8px; box-shadow: 0 10px 32px rgba(0,0,0,0.22); padding: 12px 14px; }
.avans-pop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #0B4F5E; }
.avans-pop-x { margin-left: auto; border: none; background: none; font-size: 20px; cursor: pointer; color: #0B4F5E; }
.avans-pop td.avans-r, .avans-pop th.avans-r { text-align: right; white-space: nowrap; }
.avans-pop td.avans-pop-nazn { white-space: normal; }

/* Платёжный календарь → ✅ Без согласования (16.10.2026) */
#calNoSoglBody .cal-nosogl td { vertical-align: middle; }
#calNoSoglBody .cal-nosogl input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
#calNoSoglBody .cal-nosogl-var { font-size: 14px; color: #7C9CA4; }

/* Депозит (16.10.2026): что не депозит - отдельным разделом, кнопки «✕ не депозит» / «+ это депозит» */
#depositTable tr.dep-row-net td { color: #7C9CA4; }
#depositTable tr.dep-razdel td { background: #F3F7F8; color: #4A5F66; font-weight: 600; font-size: 14px; padding: 6px 8px; }
#depositTable .dep-razdel-pod { font-weight: 400; color: #7C9CA4; }
#depositTable .btn-dep-mark { border: 1px solid #C9D6DA; background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 14px; cursor: pointer; white-space: nowrap; color: #0B4F5E; }
#depositTable .btn-dep-mark:hover { background: #E3F1F4; border-color: #3AA7BD; }
#depositTable .btn-dep-net { color: #A3271F; }
#depositTable .dep-ruk { font-size: 14px; }

/* «Мои задачи»: сделанная заявка остаётся на месте бледной строкой (16.10.2026) */
.inv-task-table tr.inv-task-done td { color: #7C9CA4; }
.inv-task-table tr.inv-task-done td.inv-task-actions { color: #1E6B34; font-size: 14px; }

/* 📝 Записная книжка - вкладка «Чат и почта» (16.10.2026, вариант А): записи на всю ширину */
#zkHost.zk-host:not([style*="none"]) { display: flex; flex-direction: column; min-height: 320px; }
#zkHost .zk-poisk { border-bottom: 1px solid #EEF3F4; }
#zkHost .zk-lenta { flex: 1 1 auto; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #F7FAFB; }
#zkHost .zk-zap { width: 100%; background: #fff; border: 1px solid #DCE9ED; border-radius: 10px; padding: 8px 12px; }
#zkHost .zk-zap.zk-pin { border-color: #E9C46A; background: #FFFBEA; }
#zkHost .zk-tekst { white-space: pre-wrap; word-break: break-word; font-size: 14px; color: #1F2D33; }
#zkHost .zk-pusto, #zkHost .zk-net { color: #7C9CA4; }
#zkHost .zk-net { text-align: center; margin-top: 40px; }
#zkHost .zk-niz { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: #7C9CA4; }
#zkHost .zk-dey { display: inline-flex; gap: 4px; margin-left: auto; visibility: hidden; }
#zkHost .zk-zap:hover .zk-dey { visibility: visible; }
#zkHost .zk-dey button { border: none; background: none; cursor: pointer; font-size: 15px; padding: 2px 4px; border-radius: 4px; }
#zkHost .zk-dey button:hover { background: #E3F1F4; }
#zkHost .zk-pravka textarea { width: 100%; font: inherit; font-size: 14px; border: 1px solid #0B6B82; border-radius: 6px; padding: 6px 8px; resize: vertical; }
#zkHost .zk-vvod { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #E3EAEC; background: #fff; }
#zkHost .zk-vvod textarea { flex: 1; resize: none; min-height: 40px; max-height: 160px; padding: 9px 12px; border: 1px solid #C9D6DA; border-radius: 18px; font: inherit; font-size: 14px; }
#zkHost .zk-plus { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: none; background: #0B6B82; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
#zkHost .zk-plus:hover { background: #0B4F5E; }
@media (hover: none) { #zkHost .zk-dey { visibility: visible; } }
/* Записная книжка: галочки и «поделиться» (её выбор 16.10.2026, вариант А) */
#zkHost .zk-zap { display: flex; gap: 10px; align-items: flex-start; }
#zkHost .zk-telo { flex: 1; min-width: 0; }
#zkHost .zk-chk { margin-top: 3px; width: 16px; height: 16px; accent-color: #0B6B82; flex: none; cursor: pointer; }
#zkHost .zk-zap.zk-sel { border-color: #0B6B82; background: #F0F8FA; }
#zkHost .zk-zap.zk-in { border-left: 4px solid #6FA8DC; }
#zkHost .zk-ot { font-size: 14px; color: #3D6F9E; margin-bottom: 2px; }
#zkHost .zk-otpr { font-size: 14px; color: #237A4B; }
#zkHost .zk-bar { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #E3F1F4; border-bottom: 1px solid #C9DDE2; font-size: 14px; }
#zkHost .zk-bar .btn { padding: 4px 11px; }
.zk-sp { flex: 1; }
.zk-krasn { color: #C62828 !important; }
.zk-m { color: #7C9CA4; }
.zk-komu-fon { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.zk-komu { background: #fff; border-radius: 8px; width: 480px; max-width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.2); font-size: 14px; color: #1F2D33; }
.zk-komu-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid #EEF3F4; font-size: 15px; }
.zk-komu-x { border: none; background: none; cursor: pointer; color: #7C9CA4; font-size: 15px; }
.zk-komu-tabs { display: flex; gap: 6px; padding: 8px 14px 0; }
.zk-komu-tabs button { padding: 5px 12px; border: 1px solid #D8DEE4; border-bottom: none; border-radius: 6px 6px 0 0; background: #F3F5F7; cursor: pointer; font: inherit; }
.zk-komu-tabs button.on { background: #fff; font-weight: 600; }
.zk-komu-list { border-top: 1px solid #D8DEE4; margin: 0 14px; overflow: auto; flex: 1; min-height: 120px; }
.zk-komu-list input[type=text] { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 6px 10px; border: 1px solid #C9D6DA; border-radius: 6px; font: inherit; }
.zk-komu-list table { width: 100%; border-collapse: collapse; }
.zk-komu-list td { padding: 5px 6px; border-bottom: 1px solid #EEF1F4; cursor: pointer; }
.zk-komu-pusto { padding: 18px 4px; text-align: center; }
.zk-komu-niz { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-top: 1px solid #EEF3F4; }

/* Кружок в чате - ссылка на карточку сотрудника (16.10.2026) */
.chat-avatar.chat-avatar-link { cursor: pointer; }
.chat-avatar.chat-avatar-link:hover { box-shadow: 0 0 0 2px #3AA7BD; }

/* 📅 Мой день - планировщик (18.10.2026). */
.plan-shapka { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.plan-shapka .plan-den { font-size:16px; min-width:220px; text-align:center; }
.plan-shapka .plan-data { font-size:14px; }
.plan-shapka .plan-data input { padding:5px; font-size:14px; }
.plan-shapka .plan-vid { display:inline-flex; gap:4px; margin-left:auto; }
.plan-ryad { display:flex; gap:14px; align-items:flex-start; }
.plan-levo { flex:0 0 260px; }
.plan-zag { font-weight:600; margin:2px 0 8px; }
.plan-kartochka { border:1px solid #d9e3ea; border-radius:8px; padding:7px 9px; margin-bottom:6px; background:#fbfdfe; cursor:grab; font-size:14px; }
.plan-kartochka small { display:block; color:#5b6b7c; font-size:14px; }
.plan-novoe input { width:100%; padding:7px 9px; font-size:14px; border:1px dashed #b9cbd1; border-radius:8px; }
.plan-podskazka, .plan-pusto { color:#5b6b7c; font-size:14px; margin-top:6px; }
.plan-pravo { flex:1 1 auto; overflow-y:auto; border:1px solid #d9e3ea; border-radius:8px; background:#fff; }
.plan-shkala { position:relative; }
.plan-stroka { position:absolute; left:0; right:0; height:30px; border-top:1px dotted #e3ebf0; cursor:pointer; }
.plan-stroka.plan-chas { border-top:1px solid #d9e3ea; }
.plan-stroka:hover { background:#f4fbfd; }
.plan-vremya { display:inline-block; width:52px; text-align:right; color:#5b6b7c; font-size:14px; padding:2px 6px 0 0; }
.plan-seychas { position:absolute; left:52px; right:0; border-top:2px solid #e05d5d; z-index:3; pointer-events:none; }
.plan-blok { position:absolute; left:60px; right:8px; border-radius:6px; padding:3px 8px; font-size:14px; overflow:hidden; z-index:2; cursor:grab;
             display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.plan-b-zad { background:#e6f9fc; border-left:4px solid #10E5FC; }
.plan-b-svoe { background:#eef3ff; border-left:4px solid #6c7ff0; }
.plan-b-povt { background:#f0fbf5; border-left:4px solid #3fb37a; }
.plan-blok.plan-sdelano { opacity:.55; }
.plan-blok.plan-sdelano .plan-b-tekst { text-decoration:line-through; }
.plan-b-vr { color:#425264; font-size:14px; }
.plan-b-knopki { display:flex; gap:4px; flex-shrink:0; }
.plan-b-knopki button { border:1px solid #c9d6de; background:#fff; border-radius:5px; padding:1px 7px; cursor:pointer; font-size:14px; }
.plan-b-knopki select { font-size:14px; padding:1px 2px; border:1px solid #c9d6de; border-radius:5px; background:#fff; }
.plan-nedelya { overflow:auto; }
.plan-ned { table-layout:fixed; width:100%; }
.plan-ned td { vertical-align:top; font-size:14px; }
.plan-ned th.plan-ned-segodnya { background:#e6f9fc; }
.plan-ned-blok { background:#f4f8fb; border-radius:5px; padding:3px 6px; margin-bottom:4px; }
#planNapStopka { position:fixed; right:18px; bottom:18px; z-index:5000; display:flex; flex-direction:column; gap:10px; max-width:340px; }
.plan-nap { background:#fff; border:2px solid #10E5FC; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.18); padding:12px 14px; font-size:14px; }
.plan-nap-zag { font-weight:700; color:#0b6b82; margin-bottom:4px; }
.plan-nap-tekst { margin-bottom:8px; }
.plan-nap-knopki { display:flex; gap:6px; }

/* ============================================================
   СТРОКА ПОД МЫШЬЮ - ЦВЕТОМ, БЕЗ РАМОК (правка 296, её выбор по
   образцу obrazec_podsvetka_cvetom.html: «1а, 2а»).

   Её постановка 19.09.2026: «мне не нравятся рамки при наведении,
   верни выделение цветом; если цвет зелёный или красный, то пусть
   становится более насыщенным, а выделение должно быть неброским,
   слабее чем прошлое». Рамки правки 287 убраны целиком.

   ОБЫЧНАЯ СТРОКА (1а) - ровно тот цвет, что она выбрала в образце:
   #eaf7f9. Прежней была #BFE6F0 в календаре и договорах лизинга (правка
   209) и бледная --row-hover в остальных таблицах; теперь везде одна.
   В темах оформления - оттенок темы (--th-row-hover): он той же силы и
   в цвет темы.
   Ячейки СО СВОИМ ЦВЕТОМ не перекрашиваются: их цвет - смысл. Это
   статусы сверки («Совпало»), ячейки акта сверки, клетка «сюда
   прикрепить счёт», зелёный «Текущий остаток» в окне банка и все ячейки
   с фоном прямо в разметке (style="background:...") - итоговые строки и
   столбцы в ДДС, маркетплейсах, Озоне, проектах.
   Налёт поверх фона для этого не годится - проверено пикселем: зелёная
   ячейка под полупрозрачным налётом выцветала до #bdd7d0.

   ЦВЕТНАЯ СТРОКА (2а) в правило обычных НЕ попадает (:not(...)) - иначе
   голубой лёг бы поверх красной, ровно то, на что она жаловалась. У
   неё свой оттенок: тот же тон, светлота на 3,5% ниже, насыщенность на
   5% выше. Рядом с каждым правилом - прежний цвет строки.

   Строка, ЗАФИКСИРОВАННАЯ щелчком (row-selected), под мышью не меняется
   ни в одном правиле: она и так самая яркая, и слабый налёт на другой
   строке с ней не спутать - второй «бегающей» выделенной строки нет
   (это её «часть 2» из правки 287, она остаётся в силе).
   ============================================================ */
:root { --row-hover-soft: #eaf7f9; }
body.ui-themed { --row-hover-soft: var(--th-row-hover, #eaf7f9); }
.data-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
.org-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
.payment-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .calendar-paid-diff-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
.deposit-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
#results tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
#bankModal .data-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
.acts-compare-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
.rules-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
#tableTab .payment-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .calendar-paid-diff-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
#lzContractsBody .data-table tbody tr:hover:not(.overdue-row, .calendar-paid-row, .duplicate-row, .calendar-row-new, .leasing-paid-row, .leasing-overdue-row, .lz-early-paid, .approved-row, .cash-row-explained, .acts-row-red, .acts-row-yellow, .acts-row-composite, .row-selected) > td:not(.status-green, .status-gray, .status-archived, .balance-cell-green, .acts-cell-red, .acts-cell-yellow, .acts-cell-composite, .cal-fill-target, .sheet-fill-target, [style*="background"]),
table.mp-grid tbody tr:hover:not(.mpg-itogo, .mpg-entry) > td {
    background-color: var(--row-hover-soft, #eaf7f9) !important;
}
/* просрочено (#fee2e2) */
.payment-table tr.overdue-row:hover:not(.row-selected) > td {
    background-color: #ffd0d0 !important;
}
/* просрочено в календаре (#fbdcdc) */
#tableTab .payment-table tbody tr.overdue-row:hover:not(.row-selected) > td {
    background-color: #fbcbcb !important;
}
/* оплачено (#a9e8c1) */
tr.calendar-paid-row:hover:not(.row-selected) > td {
    background-color: #98e7b6 !important;
}
/* оплачено в календаре (#cfeede) */
#tableTab .payment-table tbody tr.calendar-paid-row:hover:not(.row-selected) > td {
    background-color: #c0ebd5 !important;
}
/* оплачено другой суммой (#fff1bf, правка 341) */
#tableTab .payment-table tbody tr.calendar-paid-diff-row:hover:not(.row-selected) > td {
    background-color: #ffe9a3 !important;
}
/* дубликат (#fff3cd) */
.payment-table tr.duplicate-row:hover:not(.row-selected) > td {
    background-color: #ffefbb !important;
}
/* только что добавлена (#fff4c2, правка 385) */
tr.calendar-row-new:hover:not(.row-selected) > td {
    background-color: #fff1b0 !important;
}
/* лизинг оплачен, касса объяснена (#a9e8c1) */
tr.leasing-paid-row:hover:not(.row-selected) > td,
tr.cash-row-explained:hover:not(.row-selected) > td {
    background-color: #98e7b6 !important;
}
/* лизинг просрочен (#f5b7b1) */
tr.leasing-overdue-row:hover:not(.row-selected) > td {
    background-color: #f6a69f !important;
}
/* погашено досрочно (#f2f4f6) */
.leasing-schedule-table tr.lz-early-paid:hover:not(.row-selected) > td {
    background-color: #e6ebf0 !important;
}
/* согласовано (#eafaf1) */
tr.approved-row:hover:not(.row-selected) > td {
    background-color: #daf8e7 !important;
}
/* акт: красная (#fce4e4) */
.acts-compare-table tr.acts-row-red:hover:not(.row-selected) > td {
    background-color: #fbd3d3 !important;
}
/* акт: жёлтая (#fdf6d8) */
.acts-compare-table tr.acts-row-yellow:hover:not(.row-selected) > td,
.acts-compare-table tr.acts-row-composite:hover:not(.row-selected) > td {
    background-color: #fef3c6 !important;
}

/* Раздела нет в тарифе фирмы - кнопка с замком (раздел «Продажи», блок 2). */
.tariff-locked { opacity: .55; }

/* Полоса срока доступа (пробный, отсрочка, только просмотр). Страница -
   строка «меню | окно», полоса в потоке вставала третьей колонкой; теперь
   она поверх, сверху над серединой окна (между заголовком и кнопками), и ничего не сдвигает. */
.srok-band { position: fixed; top: 6px; left: calc(50% + 136px); transform: translateX(-50%); z-index: 4500;
  width: max-content; max-width: min(600px, calc(100vw - 32px)); box-sizing: border-box; padding: 5px 12px; border-radius: 8px;
  font-size: 14px; line-height: 1.35; color: #17212f; box-shadow: 0 4px 16px rgba(0,0,0,.12); text-align: center; }
@media (max-width: 900px) { .srok-band { left: 50%; } }

/* «🏆 Мотивация» таблицей, как в Excel (её выбор 13.10.2026 - вариант А).
   Сетка - как «Продано по месяцам» (table.mp-grid). Остаток в минусе -
   розовая клетка, текущий месяц - бледно-жёлтый, раскрытие под строкой. */
.motiv-wrap .mpg-bar { flex-wrap: wrap; gap: 14px; }
.motiv-seg { display: inline-flex; align-items: center; gap: 8px; }
.motiv-seg-metka { font-size: 14px; color: #5b6b7c; }
.motiv-seg-k { display: inline-flex; }
.motiv-seg button { border: 1px solid #C9DDE2; border-right: none; background: #fff; font: inherit; font-size: 14px;
    padding: 5px 12px; cursor: pointer; color: #0B6B82; }
.motiv-seg button:last-child { border-right: 1px solid #C9DDE2; }
.motiv-seg button.akt { background: #0B6B82; color: #fff; border-color: #0B6B82; }
table.motiv-grid td { cursor: pointer; }
table.motiv-grid tr.mpg-itogo td { cursor: default; }
table.motiv-grid td.motiv-name { color: #0B6B82; min-width: 220px; }
.motiv-chev { display: inline-block; width: 12px; color: #6b7f88; transition: transform .15s; }
.motiv-chev.open { transform: rotate(90deg); }
table.motiv-grid .motiv-cur { background: #fffbe8; }
table.motiv-grid thead th.motiv-cur { background: #fff4c7; }
table.motiv-grid td.motiv-neg, table.mp-grid tr.mpg-itogo td.motiv-neg { background: #fde3e6; color: #9b1c2c; }
table.motiv-grid td.motiv-future { background: #fafcfd; cursor: default; }
table.motiv-grid td.motiv-sel { box-shadow: inset 0 0 0 2px #0B6B82; }
table.motiv-grid td.motiv-total { font-weight: 600; }
table.motiv-grid tr.motiv-det > td { background: #fafcfd; text-align: left; padding: 0; cursor: default; white-space: normal; }
.motiv-det-in { padding: 8px 10px 10px 28px; }
.motiv-det-head { font-size: 14px; color: #5b6b7c; margin-bottom: 6px; }
.motiv-neg-text { color: #9b1c2c; }
.motiv-det-empty { font-size: 14px; color: #5b6b7c; }
table.mp-grid.motiv-det-grid { width: auto; min-width: 720px; }
table.mp-grid.motiv-det-grid th, table.mp-grid.motiv-det-grid td { font-size: 14px; padding: 4px 8px; position: static; cursor: default; }
table.mp-grid.motiv-det-grid a { color: #0B6B82; text-decoration: none; }

/* «👛 Кошелёк» (её правка 13.10.2026): сетка как в Excel (mp-grid); строка
   из мессенджера, ещё не проверенная («готово» не стоит), - жёлтая. */
.wallet-bar { flex-wrap: wrap; gap: 14px; }
.wallet-bar .wallet-search { margin-left: auto; }
.wallet-bar .wallet-start input[type="number"] { width: 120px; padding: 4px 6px; text-align: right; }
.wallet-bar .wallet-start input[type="date"] { padding: 4px 6px; }
.wallet-bar .wallet-search { padding: 5px 8px; min-width: 160px; }
.wallet-notype { color: #8a6516; }
.wallet-neg-text { color: #9b1c2c; }
table.wallet-grid { table-layout: fixed; }
table.wallet-grid td.mpg-in input, table.wallet-grid td.mpg-in select { width: 100%; box-sizing: border-box; }
table.wallet-grid td.mpg-t input, table.wallet-grid td.mpg-t select { text-align: left; }
table.wallet-grid col.w-date { width: 196px; } table.wallet-grid col.w-sum { width: 104px; }
table.wallet-grid col.w-vid { width: 108px; } table.wallet-grid col.w-art { width: 170px; }
table.wallet-grid col.w-com { width: 140px; } table.wallet-grid col.w-who { width: 100px; }
table.wallet-grid col.w-ok { width: 72px; } table.wallet-grid col.w-del { width: 70px; }
/* Строка из Telegram больше не жёлтая (её правка 14.10.2026: «достаточно значка ✈️»);
   класс wallet-wait остаётся - по нему «Готово» и проверки находят непроверенные. */
table.wallet-grid td.wallet-ready, table.wallet-grid td.wallet-del { text-align: center; width: 60px; }
table.wallet-grid td.wallet-who { color: #5b6b7c; }

/* Архив переводов физлиц (её правка 14.10.2026): дата и сумма узкие, «За кого
   платит» - вся свободная ширина, «Описание из выписки» своим столбцом. */
#itArchiveBox table.it-archive-table { table-layout: fixed; width: 100%; }
#itArchiveBox col.it-c-pick { width: 34px; } #itArchiveBox col.it-c-date { width: 96px; }
#itArchiveBox col.it-c-sum { width: 112px; } #itArchiveBox col.it-c-fio { width: 200px; }
#itArchiveBox col.it-c-osn { width: 130px; } #itArchiveBox col.it-c-desc { width: 150px; }
#itArchiveBox col.it-c-found { width: 106px; } #itArchiveBox col.it-c-del { width: 40px; }
#itArchiveBox table.it-archive-table td.it-cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#itArchiveBox table.it-archive-table td, #itArchiveBox table.it-archive-table th { overflow: hidden; }
table.wallet-grid td.wallet-date { display: flex; align-items: center; gap: 6px; }
table.wallet-grid td.wallet-date input { width: auto; flex: 1; min-width: 0; }
.wallet-time { color: #6b7f88; font-size: 14px; white-space: nowrap; }
.wallet-hist-ic { cursor: pointer; color: #0B6B82; margin-right: 4px; }
.wallet-hist-bar { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; font-size: 14px; }
.wallet-hist-bar a { color: #0B6B82; }
table.wallet-hist-grid { table-layout: fixed; }
table.wallet-hist-grid col.h-when { width: 110px; } table.wallet-hist-grid col.h-who { width: 120px; }
table.wallet-hist-grid col.h-entry { width: 260px; } table.wallet-hist-grid col.h-what { width: 220px; }
table.wallet-hist-grid td { overflow: hidden; text-overflow: ellipsis; cursor: default; }

/* «Вне штата»: одна строка поиска на всё с ✕ в правом краю (её правка
   14.10.2026) - тот же крестик, что в «Согласовании счетов». */
.doc-filters .doc-search-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 260px; }
.doc-filters .doc-search-wrap > input.doc-search-input { width: 100%; max-width: none; padding-right: 40px; box-sizing: border-box; }
.doc-filters .doc-search-clear {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; padding: 0; border: 0; border-radius: 2px;
    background: transparent; color: #5a6f78; font-size: 16px; line-height: 30px; cursor: pointer;
}
.doc-filters .doc-search-clear:hover { background: #E3F1F4; color: #0B4F5E; }
.doc-filters .doc-search-clear[hidden] { display: none; }
/* «Вне штата»: сортировка щелчком по заголовку - как в «Моих контактах»:
   бледное ⇅ у каждого названия, у выбранного столбца ▲ / ▼. */
.freelancers-table .fl-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.freelancers-table .fl-sort-mark { color: #B9CBD1; font-size: 14px; }
.freelancers-table .fl-sort:hover .fl-sort-mark { color: #3AA7BD; }
.freelancers-table .fl-sort.is-active { color: #0B6B82; }
.freelancers-table .fl-sort.is-active .fl-sort-mark { color: #0B6B82; }

/* Подтверждение отпуска в задаче (17.10.2026). */
.task-otp-podtv { background:#f0fbf5; border:1px solid #bfe5cf; border-radius:8px; padding:10px 12px; margin:10px 0; font-size:14px; }
.task-otp-podtv .btn { margin:6px 6px 0 0; }

/* «✅ Без согласования»: сохранить и сортировка по шапке (17.10.2026). */
.cal-nosogl .fl-sort { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
.cal-nosogl .fl-sort-mark { color:#B9CBD1; font-size:14px; }
.cal-nosogl .fl-sort:hover .fl-sort-mark, .cal-nosogl .fl-sort.is-active, .cal-nosogl .fl-sort.is-active .fl-sort-mark { color:#0B6B82; }
.cal-nosogl-save { margin-left:10px; padding:6px 14px; font-size:14px; }
.cal-nosogl-nesohr { font-size:14px; color:#8b6b1f; background:#fdf3d7; border-radius:6px; padding:5px 10px; margin:6px 0; }

/* Архив переводов физлиц: сортировка по шапке (18.10.2026). */
.it-archive-table .fl-sort { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
.it-archive-table .fl-sort-mark { color:#B9CBD1; font-size:14px; }
.it-archive-table .fl-sort:hover .fl-sort-mark, .it-archive-table .fl-sort.is-active, .it-archive-table .fl-sort.is-active .fl-sort-mark { color:#0B6B82; }

/* ДУБЛИ В «МОИХ КОНТАКТАХ» (её «да» 20.10.2026, образец Б1 + А): строка-дубль
   светло-жёлтая, совпавший номер или почта подсвечены, имя в пометке -
   ссылка на ту запись; плашка «⧉ Дубли» открывает список групп. */
#phonesModal #phonesTable tbody tr.ph-dub > td { background: #fff4c2; }
#phonesModal #phonesTable tbody tr.ph-flash > td { background: #ffe08a; box-shadow: inset 0 0 0 2px #e3a400; transition: background .3s; }
#phonesModal .ph-dub-metka { font-size: 14px; color: #7a5a00; margin-top: 3px; }
#phonesModal .ph-dub-chip { border: none; background: transparent; color: #a2601a; font-size: 14px; padding: 0; cursor: pointer; }
#phonesModal .ph-dub-chip:hover { text-decoration: underline; }
#phonesModal .ph-dub-podrobno { margin-top: 2px; }
#phonesModal .ph-dub-metka a.ph-dub-link { color: #0B6B82; font-weight: 600; }
#phonesModal .ph-dub-merge { padding: 1px 8px; font-size: 14px; margin-left: 4px; }
#phonesModal #phonesTable td a.ph-sovp { background: #ffe39a; border-radius: 3px; padding: 0 3px; }
#phonesModal .ph-dubli-wrap { position: relative; display: inline-block; }
#phonesModal .ph-dubli-top { border: 1px solid #e3c766; background: #fff4c2; color: #7a5a00; border-radius: 4px;
    padding: 6px 10px; font-size: 14px; cursor: pointer; }
#phonesModal .ph-dubli-top.is-active { box-shadow: 0 0 0 2px #e3c766; font-weight: 600; }
#phonesModal .ph-dubli-spisok { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; background: #fff;
    border: 1px solid #e3c766; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 8px 0;
    width: min(560px, 90vw); max-height: 60vh; overflow: auto; }
#phonesModal .ph-dubli-zag { padding: 2px 12px 6px; color: #5a6472; font-size: 14px; }
#phonesModal .ph-dubli-spisok a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px;
    color: #1c2833; text-decoration: none; font-size: 14px; }
#phonesModal .ph-dubli-spisok a:hover { background: #fff4c2; }
#phonesModal .ph-dubli-chem { color: #7a5a00; white-space: nowrap; }
#phonesModal .ph-dubli-niz { border-top: 1px solid #eee; margin-top: 6px; padding: 6px 12px 0; }
#phonesModal .ph-dub-warn { margin: 0 0 10px; padding: 8px 10px; border-left: 4px solid #e3a400; background: #fff7e0;
    border-radius: 3px; font-size: 14px; }
#phonesModal .ph-dub-knopki { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.ph-merge-overlay { position: fixed; inset: 0; background: rgba(20,40,50,.35); z-index: 10050;
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.ph-merge-okno { background: #fff; border-radius: 8px; padding: 16px; width: min(720px, 100%); max-height: 90vh; overflow: auto;
    box-shadow: 0 8px 28px rgba(0,0,0,.2); font-size: 14px; color: #1c2833; }
.ph-merge-okno h3 { margin: 0 0 10px; font-size: 16px; color: #0B4F5E; }
.ph-merge-dve { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .ph-merge-dve { grid-template-columns: 1fr; } }
.ph-merge-karta { border: 1px solid #d9e3ea; border-radius: 4px; padding: 8px; }
.ph-merge-zag { font-weight: 600; margin-bottom: 4px; }
.ph-merge-itog { margin-top: 10px; border: 1px solid #9fd4b6; background: #eefaf2; border-radius: 4px; padding: 8px; }
.ph-merge-knopki { margin-top: 12px; display: flex; gap: 8px; }

/* ССЫЛКИ НА ДУБЛИ В КАЛЕНДАРЕ (её правка 20.10.2026, вариант 1): плашка -
   кнопка со списком групп, переход подсвечивает строки, «→ к другой». */
.cal-dup-wrap { position: relative; display: inline-block; }
.cal-dup-top { cursor: pointer; font-family: inherit; }
.cal-dup-top.is-active { box-shadow: 0 0 0 2px #C9C4EE; }
.cal-dup-spisok { position: absolute; top: calc(100% + 4px); left: 10px; z-index: 30; background: #fff;
    border: 1px solid #C9C4EE; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.14); padding: 8px 0;
    width: min(560px, 90vw); max-height: 60vh; overflow: auto; font-weight: normal; }
.cal-dup-zag { padding: 2px 12px 6px; color: #5a6472; font-size: 14px; }
.cal-dup-spisok a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px; color: #1c2833;
    text-decoration: none; font-size: 14px; }
.cal-dup-spisok a:hover { background: #EFEDFB; }
.cal-dup-chem { color: #4B43A0; white-space: nowrap; }
.cal-dup-niz { border-top: 1px solid #eee; margin-top: 6px; padding: 6px 12px 0; }
.dup-chip .dup-go { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; cursor: pointer; }
.dup-chip .dup-go:hover { color: #0B6B82; text-decoration-style: solid; }
#tableTab .payment-table tbody tr.cal-dup-flash > td { background: #E2DCF7 !important; box-shadow: inset 0 0 0 2px #7C73D8; }

/* ДОГОВОРЫ ИЗ «ЛИЗИНГА» В «📄 ДОГОВОРАХ» (её правка 20.10.2026, вариант 1А).
   Плашка «🚗 из лизинга» в «О чём» убрана 29.10.2026 (её правка). */

/* «Это договор — сохранить в «Договоры»?» (её правка 20.10.2026, вариант 2А). */
.dog-predl { position: fixed; right: 16px; bottom: 16px; z-index: 10060; width: min(440px, calc(100vw - 32px));
    background: #fff; border: 1px solid #9FD3DD; border-left: 4px solid #3AA7BD; border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 12px 14px; font-size: 14px; color: #1c2833; }
.dog-predl-t { font-weight: 600; padding-right: 22px; }
.dog-predl-m { color: #5a6472; margin-top: 4px; overflow-wrap: anywhere; }
.dog-predl-kn { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.dog-predl-x { position: absolute; top: 6px; right: 8px; border: none; background: none; font-size: 20px; cursor: pointer; color: #5a6472; }

/* ЛИЗИНГ: ОДНА ПЛАШКА СХОДИМОСТИ С ОТВЕТОМ КНОПКОЙ (её «да» 20.10.2026). */
.lz-sx { border: 1px solid #e3c766; background: #fff8e1; border-radius: 6px; padding: 8px 10px; margin: 6px 0; font-size: 14px; color: #1c2833; }
.lz-sx-gray { border-color: #d9e3ea; background: #f6f8fa; color: #425264; }
.lz-sx-t { font-weight: 600; }
.lz-sx-x { margin-top: 3px; }
.lz-sx-kn { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.lz-sx-b { padding: 3px 10px !important; font-size: 14px !important; }
.lz-sx-who { color: #7c8899; }
.lz-sx-d { margin-top: 4px; color: #5a6472; }
.lz-sx-d summary { cursor: pointer; color: #0B6B82; }

/* ЛИЗИНГ: МЕСТО ПОД ГРАФИК (её «делай по рекомендации» 20.10.2026: «как мало
   места под список, растяни экран ниже»). Было: поля договора столбиком
   слева, график - узкой колонкой справа, и после плашек на график
   оставалось две строки. Стало: поля по-прежнему столбиком слева, а в
   колонке графика - одна компактная плашка и файлы в строке заголовка;
   график - до низа окна (fit-bottom). */
#lzContractsBody .lz-sched-title .lz-files-v-titule { flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 400; font-size: 14px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#lzContractsBody .lz-sx { margin: 4px 0; padding: 6px 10px; }
#lzContractsBody .lz-sx-kn { margin-top: 4px; }
#lzContractsBody .lz-pane-body { grid-template-columns: 290px minmax(0, 1fr); gap: 14px; }
#lzContractsBody .lz-sched-title > span:first-child { white-space: nowrap; }
#lzContractsBody .lz-sched-title .lz-files-v-titule { flex: 0 1 auto; flex-wrap: nowrap; overflow: hidden; }

/* ПЕРЕВОД ФИЗ ЛИЦ - АРХИВ: РОВНЫЕ СТОЛБЦЫ И ПОД ЛЮБОЙ ЭКРАН (её правка 20.10.2026
   со снимком: «выровняй ширину столбцов и сделай адаптацию под экран»).
   Было: «За кого платит» забирал всё свободное место, а поле в нём - узкое,
   и назначение с описанием обрезались до «Оплата по счет…». Стало: ширины
   долями от таблицы (меняются вместе с экраном), поле контрагента - во всю
   ячейку, назначение и описание - до двух строк, полностью - при наведении.
   Узкий экран: таблица не сжимается меньше 980px и ездит вбок. */
#itArchiveBox table.it-archive-table { min-width: 980px; }
#itArchiveBox col.it-c-date { width: 7.5%; }
#itArchiveBox col.it-c-sum { width: 8.5%; }
#itArchiveBox col.it-c-fio { width: 17%; }
#itArchiveBox col.it-c-contr { width: 21%; }
#itArchiveBox col.it-c-osn { width: 19%; }
#itArchiveBox col.it-c-desc { width: 12%; }
#itArchiveBox col.it-c-found { width: 8.5%; }
#itArchiveBox table.it-archive-table td input[type="text"] { width: 100%; box-sizing: border-box; }
#itArchiveBox table.it-archive-table td.it-cut { white-space: normal; display: table-cell; }
#itArchiveBox table.it-archive-table td.it-cut > .it-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
#itArchiveBox table.it-archive-table th { white-space: normal; }

/* БАЛАНС: «ИЗ ЧЕГО СУММА» (её «баланс а» 20.10.2026). */
.balance-table .bal-klik { cursor: pointer; color: #0B6B82; border-bottom: 1px dotted #0B6B82; }
.balance-table .bal-klik:hover, .balance-table .bal-klik.is-open { border-bottom-style: solid; }
.balance-table tr.bal-ras > td { background: #f7fbfc; border-bottom: none; padding-top: 2px; padding-bottom: 2px; font-size: 14px; color: #425264; }
.balance-table tr.bal-ras > td.bal-ras-o { padding-left: 34px; }
.balance-table tr.bal-ras > td.bal-ras-s { text-align: right; white-space: nowrap; }
.balance-table tr.bal-ras-niz > td { border-bottom: 1px solid #e3ecf0; padding-bottom: 8px; }
.balance-table tr.bal-ras a { color: #0B6B82; }
/* Переименовать файлы: контрагент из справочника (её правка 20.10.2026). */
.frn-kontr-ok { font-size: 14px; color: #1F6B45; margin-top: 2px; }
.frn-kontr-net { font-size: 14px; color: #a2601a; margin-top: 2px; }

/* Похожие контрагенты (её выбор 20.10.2026, «по совету а и б»). */

/* Итоги лизинг: подсказка при перетаскивании - плашкой, клетки не прыгают;
   перенесённая сумма подсвечивается (её правка 22.10.2026). */
.lz-predv-plashka { position: fixed; z-index: 10060; display: none; pointer-events: none; background: #fff; border: 1px solid #2e86ab;
    border-radius: 6px; padding: 3px 8px; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.15); white-space: nowrap; }
.lz-predv-plashka .lz-plus { color: #2e86ab; font-weight: 600; }
.lz-predv-plashka .lz-ostanetsya { color: #5b6b7c; }
#listModal .avans-grid .lz-doc.lz-novoe, #listModal .avans-grid td.lz-novoe { background: #fff1a8 !important; border-color: #e3c766 !important;
    box-shadow: 0 0 0 2px #e3c766; transition: background 0.3s; }

/* «Мои задачи»: одна таблица, стадия - цветной строкой; кнопки белые без значков
   (её выбор 22.10.2026, варианты «А» и «1»). Перекрывает прежние цветные кнопки. */
#invoicesModal .inv-task-table.inv-task-odna { margin-top: 10px; }
#invoicesModal .inv-task-table.inv-task-odna thead th { position: sticky; top: 0; z-index: 2; }
#invoicesModal .inv-task-table tr.inv-task-stage > td {
    background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35));
    font-weight: 700; color: #0B4F5E; padding: 8px 10px; border-bottom: none; cursor: default; }
#invoicesModal .inv-task-table tr.inv-task-stage .inv-task-stage-n { font-weight: 400; color: #425264; }
#invoicesModal .inv-task-actions button,
#invoicesModal .inv-task-actions .btn-decision-yes,
#invoicesModal .inv-task-actions .btn-decision-no,
#invoicesModal .inv-task-actions .btn-composite-approve,
#invoicesModal .inv-task-actions .btn-success,
#invoicesModal .inv-task-actions .btn-primary,
#invoicesModal .inv-task-actions .btn-secondary {
    background: #fff !important; color: #1c2833 !important; border: 1px solid #b9c8d2 !important;
    border-radius: 4px !important; font-weight: 400 !important; padding: 2px 10px !important; box-shadow: none !important; }
#invoicesModal .inv-task-actions button.mt-glavnaya { color: #0B4F5E !important; font-weight: 600 !important; border-color: #7FB7C4 !important; }
#invoicesModal .inv-task-actions .btn-decision-yes:hover,
#invoicesModal .inv-task-actions .btn-composite-approve:hover,
#invoicesModal .inv-task-actions .btn-success:hover { background: #E4F3EA !important; }
#invoicesModal .inv-task-actions .btn-decision-no:hover { background: #FBE9E7 !important; color: #A3271F !important; }
#invoicesModal .inv-task-actions .btn-primary:hover,
#invoicesModal .inv-task-actions .btn-secondary:hover { background: #EAF5F8 !important; }
.contractor-item.contractor-item-dub .name-text { background: #fff4c2; }
.contractor-item .contractor-pohozh { display: block; font-size: 14px; color: #7a5a00; white-space: normal; }
.kontr-pods { position: fixed; z-index: 10050; max-width: 520px; padding: 6px 10px; border-left: 4px solid #3AA7BD;
    background: #eef8fa; color: #1c2833; border-radius: 4px; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.kontr-pods a { color: #0B6B82; }
.kontr-pods .kontr-pods-x { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: #425264; margin-left: 4px; }

/* История изменений - таблица (её выбор 20.10.2026, вариант А). */
.aud-fil { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
.aud-f { border:1px solid #b9c8d2; border-radius:14px; padding:2px 10px; background:#fff; font-size:14px; color:#1c2833; cursor:pointer; }
.aud-f.on { background:#0B6B82; border-color:#0B6B82; color:#fff; }
.aud-table { border-collapse:collapse; width:100%; background:#fff; font-size:14px; }
.aud-table th, .aud-table td { border-bottom:1px solid #e3ecf0; padding:6px 8px; text-align:left; vertical-align:top; }
.aud-table th { background:#eef6f9; font-weight:600; color:#425264; white-space:nowrap; }
.aud-table .aud-t { white-space:nowrap; color:#425264; }
.aud-table .aud-razd { color:#0B4F5E; font-weight:600; }
.aud-table tr.aud-den > td { background:#f4f9fb; font-weight:700; color:#0B4F5E; }
.aud-table tr.aud-vlozh > td { background:#fafcfd; }
.aud-table tr.aud-vlozh > td:first-child { padding-left:18px; }
.aud-bylo { color:#A3271F; text-decoration:line-through; }
.aud-stalo { color:#1d7240; font-weight:600; }
.aud-ser { color:#0B6B82; margin-left:6px; white-space:nowrap; }

/* Новая фирма по шагам (её выбор 20.10.2026, вариант А). */
.firma-nastr { position:fixed; right:16px; bottom:16px; z-index:9000; width:min(560px, calc(100vw - 32px)); background:#fff;
    border:2px solid #e3c766; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:14px; }
.firma-nastr-h { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#fffbea; border-radius:8px 8px 0 0; color:#7a5a00; }
.firma-nastr-sv { border:0; background:transparent; cursor:pointer; font-size:16px; color:#7a5a00; }
.firma-nastr.svernuto .firma-nastr-b { display:none; }
.firma-nastr-b { padding:6px 12px 10px; }
.firma-nastr-pod { color:#5a6472; margin-bottom:4px; }
.firma-nastr-s { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-top:1px solid #eef2f5; }
.firma-nastr-s.gotov b { color:#1d7240; }
.firma-nastr-chto { color:#5a6472; }
.firma-nastr-kn { display:flex; gap:4px; flex-shrink:0; }
.firma-nastr-kn .btn { padding:3px 10px; font-size:14px; }
.firma-nastr-chip { display:inline-block; background:#fff4c2; color:#7a5a00; border-radius:10px; padding:0 8px; font-size:14px; }

.firma-vzyat-spisok { overflow:auto; border:1px solid #e3ecf0; border-radius:6px; padding:6px 10px; margin-top:6px; }
.firma-vzyat-spisok label { display:block; padding:3px 0; }

/* Договоры по контрагентам (её выбор 21.10.2026, вариант А). */
/* Без цветной заливки (её правка 22.10.2026: «чтобы не было выделения цветом и
   жирного шрифта на контрагентах, у кого несколько договоров») - как строка
   договора: название и сумма тем же шрифтом, что у договоров. */
#contractsModal tr.ctr-gr > td { cursor:pointer; }
#contractsModal .contracts-table tbody tr.ctr-gr > td:nth-child(1) { font-weight: 600; color: #0B4F5E; }
#contractsModal .contracts-table tbody tr.ctr-gr > td:nth-child(6) { font-weight: 600; font-variant-numeric: tabular-nums; }
#contractsModal tr.ctr-gr .ctr-gr-i { color:#5a6472; font-weight:400; }
/* Строка-шапка - как строка договора (её выбор 22.10.2026, «1»): та же высота,
   та же линия снизу и линии между столбцами; «Платежей» - по центру, как у договоров. */
#contractsModal .contracts-table tbody tr.ctr-gr > td { border-bottom: 1px solid #0B6B82; padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
#contractsModal .contracts-table tr.ctr-gr > td + td { border-left: 1px solid #C9E3E9; }
#contractsModal .contracts-table tbody tr.ctr-gr > td:nth-child(7) { text-align: center !important; }
#contractsModal tr.ctr-gr .ctr-gr-str { color:#0B6B82; }
#contractsModal tr.ctr-vlozh > td:first-child { padding-left:28px; }

/* Реестр (её правка 22.10.2026): шапка столбцов не уезжает при прокрутке;
   «Найдено» - рядом с кнопками вкладок. */
#invoicesBoard .reestr-table thead { position: sticky; top: 0; z-index: 3; }
#invoicesBoard .reestr-table thead th { background: #eef6f9; }
#invoicesBoard .reestr-sum-ryadom { font-size: 15px; color: #1a2634; margin-left: 6px; white-space: nowrap; }
#contractsModal mark { background:#fff1a8; padding:0 1px; }
#contractsFilters { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#contractsFilters .ctr-poisk-wrap { flex:1; min-width:280px; max-width:640px; }
#contractsModal .ctr-lz-card h3 { margin:0 0 8px; font-size:16px; color:#0B4F5E; }
#contractsModal .ctr-lz-polya { display:grid; grid-template-columns:180px 1fr; gap:4px 12px; font-size:14px; }
#contractsModal .ctr-lz-polya span:nth-child(odd) { color:#5a6472; }

/* «✏️ поправить имя» у группы архива (её правка 21.10.2026) - видно под мышью. */
.doc-archive-kontr .doc-archive-imya { font-size:14px; color:#0B6B82; margin-left:8px; visibility:hidden; text-decoration:none; }
.doc-archive-kontr:hover .doc-archive-imya, .doc-archive-imya:focus-visible { visibility:visible; }
@media (hover: none) { .doc-archive-kontr .doc-archive-imya { visibility:visible; } }

/* История заявки (её правка 21.10.2026): поле листается до последней
   строки, шапка таблицы стоит на месте. */
.inv-hist-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f4f7fa;
}

/* Пробник в окне «🧾 Акт сверки»: «сверено N из 10 актов» (sverka_probnyy.js, 25.10.2026). */
.sverka-probnyy { margin: 0 0 8px; padding: 8px 12px; border: 1px solid #9FD3DD; background: #E0F2F6; border-radius: 8px; font-size: 14px; color: #0B4F5E; }
.sverka-probnyy a { color: #0B6B82; font-weight: 600; }
.sverka-probnyy-malo { background: #fff4d6; border-color: #e9cf86; }

/* «Из чего остаток» в акте сверки (25.10.2026) */
.acts-razlozhenie { margin-top: 8px; padding-top: 8px; border-top: 1px solid #9FD3DD; }
.acts-razlozhenie > b { color: #0B4F5E; display: block; margin-bottom: 4px; }
table.acts-mesyacy { margin-top: 6px; width: auto; min-width: 560px; }
table.acts-mesyacy td, table.acts-mesyacy th { padding: 4px 10px; font-size: 14px; }
table.acts-mesyacy tr.acts-mes-raznica td { background: #FFF4D6; }
.acts-mesyacy-det { margin-top: 6px; } .acts-mesyacy-det > summary { cursor: pointer; color: #0B6B82; font-size: 14px; }

/* «Текущее сальдо» в Реализациях - как оборотно-сальдовая (её правка 27.10.2026):
   сальдо на дату, отгружено, оплачено, сальдо сейчас; долг - красным, переплата - зелёным. */
.rlz-osv th.rlz-num, .rlz-osv td.rlz-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rlz-osv td.rlz-dolg { color: #C9403F; }
.rlz-osv td.rlz-pereplata { color: #1F8A4C; }
.rlz-osv tfoot td { font-weight: 700; border-top: 2px solid #cfe0e6; background: #f4f9fb; }

/* Поиск по справке (27.10.2026) */
#helpModal .help-poisk { width: 100%; max-width: 560px; margin: 0 0 12px; font-size: 15px; padding: 8px 12px; box-sizing: border-box; }
#helpModal mark.help-nashel { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.help-poisk-itog { font-size: 14px; color: #5d6d7a; margin-bottom: 8px; }

/* «⚙️ Настроить карточки» - крестик закрытия (её правка 28.10.2026) */
.inv-field-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.inv-field-panel-close { border: none; background: none; color: #5d6d7a; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.inv-field-panel-close:hover { color: #1f2d3a; }

/* Реестр: «↩ Вернуть» у убранной строки во «Все задачи на оплату» (28.10.2026) */
.reestr-gde .reestr-vernut { display: block; margin-top: 4px; padding: 2px 8px; font-size: 14px; }

/* «Мой день» без левого поля (28.10.2026) */
.plan-ryad.plan-bez-leva { display: block; }
.plan-podskazka-verh { margin: 0 0 6px; }

/* ---------- Чат: состав группы и поиск по переписке (28.10.2026) ---------- */
#chatPanel .chat-sostav-knopka { border: none; background: none; padding: 0; font-size: 14px; color: #6c8791; cursor: pointer;
    max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#chatPanel .chat-sostav-knopka:hover { color: #0B4F5E; text-decoration: underline; }
#chatPanel .chat-sostav-spisok { padding: 8px 18px; border-bottom: 1px solid #E3EEF1; background: #F7FBFC; }
#chatPanel .chat-sostav-zag { font-size: 14px; color: #6c8791; margin-bottom: 6px; }
#chatPanel .chat-sostav-chel { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 14px; color: #1a2e38; }
#chatPanel .chat-sostav-chel .chat-avatar { width: 28px; height: 28px; font-size: 14px; }
#chatPanel .chat-sostav-rol { color: #8b97a3; margin-left: 8px; }
#chatPanel .chat-group-sostav { font-size: 14px; color: #0B4F5E; margin: 4px 0 8px; }
#chatPanel .chat-group-poisk { margin-top: 6px; }
#chatPanel .chat-poisk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid #E3EEF1; background: #fff; flex-wrap: wrap; }
#chatPanel .chat-poisk-bar .chat-search { flex: 1; min-width: 180px; }
#chatPanel .chat-poisk-vid { display: inline-flex; gap: 4px; }
#chatPanel .chat-poisk-chip { border: 1.5px solid #CFE7EC; background: #fff; color: #0B4F5E; border-radius: 8px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
#chatPanel .chat-poisk-chip.is-active { background: #E6F5F8; border-color: #3AA7BD; font-weight: 600; }
#chatPanel .chat-poisk-itog { font-size: 14px; color: #6c8791; margin-bottom: 6px; }
#chatPanel .chat-poisk-rez { padding: 8px 10px; border-bottom: 1px solid #EEF4F6; cursor: pointer; font-size: 14px; }
#chatPanel .chat-poisk-rez:hover { background: #F3FAFB; }
#chatPanel .chat-poisk-kto { color: #6c8791; margin-bottom: 2px; }
#chatPanel .chat-poisk-tekst { color: #1a2e38; white-space: pre-wrap; word-break: break-word; }
#chatPanel .chat-poisk-tekst mark { background: #FFE89A; padding: 0 1px; }
#chatPanel .chat-row.chat-flash .chat-msg { box-shadow: 0 0 0 3px #FFD45C; }

/* ---------- Почта: галочки, действия, закрыть письмо, имя контрагента (28.10.2026) ---------- */
.mail-vybor { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 6px 10px; background: #F7FBFC; border-bottom: 1px solid #e0e6ea; font-size: 14px; }
.mail-vybor-vse { display: inline-flex; align-items: center; gap: 6px; color: #425264; cursor: pointer; white-space: nowrap; }
.mail-vybor-knopki { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mail-vk { border: 1px solid #CFE7EC; background: #fff; color: #0B4F5E; border-radius: 6px; padding: 3px 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.mail-vk:hover { background: #E3F1F4; border-color: #3AA7BD; }
.mail-vk-del:hover { background: #FBE9E7; border-color: #E08A80; }
.mail-item { position: relative; padding-left: 34px; }
.mail-item .mail-galka { position: absolute; left: 8px; top: 8px; cursor: pointer; }
.mail-item.is-checked { background: #F0F8FA; }
.mail-item .mail-tochka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3AA7BD; margin-right: 6px; vertical-align: middle; }
.mail-item.unread .mail-from { color: #0B4F5E; }
.mail-item .mail-from-podp { font-weight: 400; color: #7c8899; }
.mail-view-verh { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 8px; }
.mail-view-verh .mail-view-from { flex: 1; }
.mail-view-knopki { display: inline-flex; gap: 4px; align-items: center; flex-shrink: 0; }
.mail-view-zakryt { border: none; background: none; font-size: 22px; line-height: 1; color: #7c8899; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.mail-view-zakryt:hover { background: #E3F1F4; color: #0B4F5E; }

/* ---------- ПОЧТА — НОВЫЙ ВИД, вариант «А» (её выбор 28.10.2026, образец Obrazec_pochta_novyy_vid.html) ----------
   Одна строка отборов с числами, крупнее шрифт, контрагент жирным, письмо - заголовок крупно. */
#mailBody .mail-otbory { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #E0E9EC;
    padding-bottom: 8px; margin-bottom: 10px; }
#mailBody .mail-otbor { border: none !important; background: none; color: #6c8791; padding: 6px 8px; border-radius: 8px;
    font-size: 15px; cursor: pointer; user-select: none; box-shadow: none; }
#mailBody .mail-otbor:hover { background: #F3FAFB; color: #0B4F5E; }
#mailBody .mail-otbor.active { background: #E6F5F8; color: #0B4F5E; font-weight: 700; }
#mailBody .mail-otbor.is-zero { opacity: .6; }
#mailBody .mail-otbor-n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 2px; border-radius: 10px;
    background: #E3EEF1; color: #0B4F5E; font-size: 14px; font-weight: 700; text-align: center; }
#mailBody .mail-otbor-n.is-krasn { background: #FBDCDC; color: #C9403F; }
#mailBody .mail-taskaet { opacity: .4; }
#mailBody .mail-syuda { box-shadow: -3px 0 0 #3AA7BD !important; }
#mailBody .mail-toolbar .mail-account { font-weight: 400; color: #6c8791; }
#mailBody .mail-grid { grid-template-columns: minmax(320px, 440px) 1fr; font-size: 15px; }
#mailBody .mail-list, #mailBody .mail-view { border-color: #E0E9EC; border-radius: 10px; }
#mailBody .mail-item { padding: 10px 12px 10px 36px; border-bottom-color: #EEF4F6; }
#mailBody .mail-item:hover { background: #F7FBFC; }
#mailBody .mail-item.selected { background: #E6F5F8; box-shadow: inset 4px 0 0 #3AA7BD; }
#mailBody .mail-item .mail-galka { left: 10px; top: 11px; }
#mailBody .mail-item .mail-from { font-weight: 400; color: #425264; }
#mailBody .mail-item .mail-from-k { font-weight: 700; color: #0B4F5E; }
#mailBody .mail-item.unread .mail-from { font-weight: 700; color: #0B4F5E; }
#mailBody .mail-item .mail-date { font-size: 14px; }
#mailBody .mail-item .mail-subj { margin-top: 3px; color: #1a2e38; }
/* Начало письма под темой (её выбор «А1» 29.10.2026): одна серая строка, длинное - многоточием. */
.mail-item .mail-nachalo { margin-top: 2px; color: #7c8899; font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailBody .mail-marks { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
#mailBody .mail-mark { border: none; background: #EEF4F6; color: #0B4F5E; border-radius: 6px; padding: 1px 7px; font-size: 14px; }
#mailBody .mail-mark-vl { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailBody .mail-mark-schet { background: #E7F6EE; color: #1F7A50; }
#mailBody .mail-mark-zakr { background: #EEF0FF; color: #4B47A8; }
#mailBody .mail-mark-rule { background: #FFF4D6; color: #7a5a00; }
#mailBody .mail-view { padding: 16px 20px; }
#mailBody .mail-view-zag { flex: 1; min-width: 0; }
#mailBody .mail-view-subj { font-size: 20px; font-weight: 700; color: #0B4F5E; margin: 0 0 6px; }
#mailBody .mail-view-from { font-size: 15px; font-weight: 400; color: #1a2e38; }
#mailBody .mail-view-from b { color: #0B4F5E; }
#mailBody .mail-view-meta { font-size: 14px; color: #6c8791; }
#mailBody .mail-actions { background: #F3FAFB; border-radius: 10px; padding: 8px; margin: 12px 0; align-items: center; }
#mailBody .mail-actions [data-tashch] { cursor: grab; }
#mailBody .mail-tashch-podskaz { margin-left: auto; font-size: 14px; color: #6c8791; }
#mailBody .mail-contr { border-left: none; background: #F7FBFC; border-radius: 8px; font-size: 14px; }
#mailBody .mail-view-text { font-size: 16px; line-height: 1.6; max-width: 820px; margin-top: 14px; }
#mailBody .mail-att { border-color: #E0E9EC; border-radius: 10px; padding: 8px 12px; max-width: 560px; }

/* Сотрудники фирмы в списке «Ответственные» (её правка 29.10.2026): появляются сами, правятся в «👥 Сотрудниках». */
#respTable tr.resp-firmy td { color: #1e293b; }
#respTable .resp-firmy-metka { margin-left: 8px; font-size: 14px; color: #7c8899; }