/* === ВСЕ СТИЛИ (полные, без изменений) === */
        /* ============================================================
           ВИЗУАЛЬНОЕ ОФОРМЛЕНИЕ (по присланному образцу) - только
           цвета/формы/тени ниже подогнаны под референс. Ничего в
           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;
        }
        .upload-area {
            display: flex;
            gap: 20px;
            margin: 20px 0;
            flex-wrap: wrap;
        }
        .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;
        }
        #bankBtn {
            font-size: 17px;
        }
        .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 input,
        .leasing-contracts-table select {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            display: block;
            padding: 2px 6px;
            font-size: 14px;
            border: 1px solid #bdc3c7;
            border-radius: 4px;
        }
        .leasing-contracts-table td {
            padding: 2px 5px;
        }
        /* ПОЛЯ НЕ СЖИМАЮТСЯ ДО НЕЧИТАЕМОГО (её правка 09.09.2026:
           «поле маленькое»). Колонок в договорах много, и таблица
           ужимала суммы до «41(» и даты до трёх знаков - цифру,
           которую нельзя прочитать, всё равно что не показать.
           Задаём разумный минимум и разрешаем таблице быть шире окна:
           лучше подвинуть её вбок, чем гадать, что за сумма. */
        /* ШИРИНУ ЗАДАЁМ ТАБЛИЦЕ, А НЕ ПОЛЯМ. У полей стоит width:100% и
           min-width:0 - это было исправлением прошлой её правки: с
           жёсткой шириной поля вылезали за ячейку. Поэтому расширяем
           саму таблицу: ячейки становятся шире, а поля растягиваются
           за ними сами. */
        .leasing-contracts-table { min-width: 1500px; }
        /* Ящик с таблицей ездит вбок - иначе минимальная ширина просто
           обрежет правые колонки. */
        #lzContractsBody { overflow-x: auto; }
        /* Кнопки в ячейках НЕ растягиваются - это было ошибкой:
           правило доставало и до крестиков в графике платежей (он
           вложен в ту же таблицу), и крестик удаления превращался в
           серую полосу на всю ширину. Квадратики остаются квадратиками. */
        /* Поле «Выплачено» стоит в одной ячейке с подписью-суммой:
           поле сверху во всю ширину, сумма под ним. */
        .leasing-contracts-table td > input[type="number"] + span {
            display: block;
            margin-top: 2px;
        }
        /* СХОДИМОСТЬ - маленький квадратик размера кнопки удаления:
           зелёная галочка, если остаток совпал с графиком платежей, и
           красный крестик, если нет. Цвет тут смысловой (как у
           «просрочено»), темой не перекрашивается. */
        .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 tr:nth-child(even) {
            background: #f5f7fa;
        }
        .org-table tr:hover {
            background: var(--row-hover);
        }
        .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;
        }

        /* календарь и прочее */
        .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;
        }
        .payment-table tr:nth-child(even) {
            background: #f5f7fa;
        }
        .payment-table tr:hover {
            background: var(--row-hover);
        }
        /* Правка 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;
        }
        /* СМЫСЛОВЫЕ строки (просрочено, дубликат, оплачено) сохраняют свой
   цвет и при наведении, и в любой теме: красный здесь значит
   «просрочено», а не «оформление». Перекрашивать их темой нельзя -
   пропадёт смысл. */
.payment-table tr.overdue-row:hover {
            background-color: #fecaca !important;
        }
        .payment-table tr.duplicate-row {
            background-color: #fff3cd !important;
            border-left: 3px solid #f39c12;
        }
        .payment-table tr.duplicate-row:hover {
            background-color: #ffe8a1 !important;
        }

        /* прочие старые стили */
        /* ИЗМЕНЕНИЕ: раньше был 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);
            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;
        }
        .contractor-item .badge.no-close-badge {
            background: #fdebd0;
            color: #e67e22;
        }
        .contractor-item .badge.check-badge {
            background: #d6eaf8;
            color: #2980b9;
        }
        .contractor-item .badge.act-badge {
            background: #e8daef;
            color: #8e44ad;
        }
        .contractor-item .badge.advance-badge {
            background: #d5f5e3;
            color: #1abc9c;
        }
        .contractor-item .badge.podotchet-badge {
            background: #fae5d3;
            color: #d35400;
        }
        .contractor-item .badge.archived-badge {
            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. */
        #results tbody tr:hover {
            background: var(--row-hover) !important;
        }
        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);
        }
        td {
            padding: 6px 6px;
            border-bottom: 1px solid #ecf0f1;
            vertical-align: middle;
            font-size: 14px;
        }
        tr:nth-child(even) {
            background: #f7fafb;
        }
        tr:nth-child(odd) {
            background: #ffffff;
        }
        tr:hover {
            background: var(--row-hover) !important;
        }
        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: 1100px;
        }
        /* Вертикальная черта между двумя актами - чтобы было видно, где
           кончается наш и начинается их. */
        .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 { background: #fdf6d8; }
        /* Пусто с одной стороны - значит, на эту дату у неё записи нет. */
        .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;
        }
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 10px;
            margin: 15px 0;
        }
        .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;
        }
        .contractor-stats {
            font-size: 14px;
            color: #1a2634;
            padding: 8px 12px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
        }
        .contractor-stats span {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        .clear-filters-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 4px;
            display: block;
            width: 100%;
        }
        .clear-filters-btn:hover {
            background: #c0392b;
        }
        /* ИЗМЕНЕНИЕ: раньше было 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%;
        }
        #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);
        }
        .list-item:nth-child(even) {
            background: #f5f7fa;
        }
        .list-item:nth-child(odd) {
            background: #eef1f5;
        }
        .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-header-row {
            font-weight: bold;
            font-size: 14px;
            background: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 10px;
            color: #425264;
            position: sticky;
            top: 0;
        }
        .composite-item:nth-child(even) { background: #f5f7fa; }
        .composite-item:nth-child(odd) { background: #eef1f5; }
        .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 tr:nth-child(even) { background: #f5f7fa; }
        .deposit-table tr:hover { background: var(--row-hover) !important; }
        
        /* Исправление смещения полей в депозите */
        .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; }
        .deposit-table .btn-delete-deposit {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: 0.3s;
        }
        .deposit-table .btn-delete-deposit:hover { background: #c0392b; }

        @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) {
            .upload-area { flex-direction: column; }
            table { font-size: 14px; }
            td, th { padding: 3px 2px; }
            .summary-cards { grid-template-columns: 1fr 1fr; }
            .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;
        }
        /* "Реализации" внутри "Анализ" - 4 топ-списка рядом. CSS grid
           с равными колонками (а не flex:1 по содержимому) - тёмные
           шапки таблиц теперь всегда одинаковой ширины и высоты,
           независимо от того, что внутри (короткое "Кол-во" или
           длинное "Ответственный/Сумма/% закрыто"). На узких экранах
           сворачивается в 2, потом в 1 колонку. */
        .an-rlz-top-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        @media (max-width: 1400px) {
            .an-rlz-top-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 700px) {
            .an-rlz-top-grid { grid-template-columns: 1fr; }
        }
        /* Числа (Сумма/Кол-во/% закрыто) в этих таблицах всегда в
           одну строку - не переносятся, даже если колонка узкая. */
        .an-rlz-top-table td:not(:nth-child(2)),
        .an-rlz-top-table th:not(:nth-child(2)) {
            white-space: nowrap;
        }
        /* Крупнее шрифт (по правке) - у таблиц "Реализации" (топ
           контрагентов/по количеству/наименьший % закрытия/по
           ответственным) и у сводной строки над ними. */
        .an-rlz-top-table {
            font-size: 16px;
        }
        .an-rlz-top-table th {
            font-size: 14px;
        }

/* ============================================================
   ПРОДОЛЖЕНИЕ визуального прохода (по присланному образцу) -
   начатый ранее проход дошёл только до кнопок/модалок в начале
   файла, дальше по файлу остались старые цвета/формы. Здесь
   ДОВОДИМ ту же палитру (--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 tr:hover td {
    background: var(--row-hover);
}
.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 tr:nth-child(even) {
    background: #fafbfc;
}
.org-table tr:hover {
    background: var(--row-hover);
}
.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-header-row {
    font-weight: bold;
    font-size: 14px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 10px;
    color: #425264;
}
.manual-review-item:nth-child(even) { background: #f5f7fa; }
.manual-review-item:nth-child(odd) { background: #eef1f5; }
.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;
}

/* Подсветка только что добавленной строки (по просьбе - "при добавлении
   новой строки не видно, какую именно я добавила"). Снимается после
   сохранения. */
.calendar-row-new > td {
    background: #F5A8A8 !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;
}
.profile-view-label {
    padding: 6px 14px;
    color: var(--wc-text-sub);
    width: 170px;
    vertical-align: top;
}

/* Фото и сведения - одной высоты, фото квадратное (по правке -
   "сделай фото в ЛК квадратное, гармонично впиши в размер по ширине и
   высоте относительно текстовых полей"). Растягивать нечего вручную:
   строка - сетка, обе колонки тянутся по самой высокой. */
.profile-view-row {
    display: grid;
    grid-template-columns: 190px minmax(220px, 1fr);
    gap: 24px;
    align-items: stretch;
}
.profile-view-main { min-width: 0; }
.profile-photo-square,
.profile-photo-square .profile-photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 190px;
    border-radius: 14px;      /* квадрат со скруглением, а не круг */
}
.profile-photo-square img { border-radius: 14px; }

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

/* На узком экране фото над сведениями, а не сбоку: колонка в 190px
   рядом с полями оставила бы полям полсотни пикселей. */
@media (max-width: 640px) {
    .profile-view-row { grid-template-columns: 1fr; }
    .profile-photo-square,
    .profile-photo-square .profile-photo-placeholder {
        width: 160px;
        min-height: 160px;
        height: 160px;
    }
}
.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; }
}

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

/* ============================================================
   Окно "🏦 Банк — остатки по счетам" - крупнее шрифт (по правке -
   "сделай шрифт больше, ничего не видно"). Таблица использует общий
   .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 .data-table tbody tr:hover td {
    background: var(--row-hover) !important;
}
#bankModal .deposit-header-controls span {
    font-size: 16px !important;
}
#bankModal #bankGrandTotalBox {
    font-size: 20px !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;
}
.contractor-filter-reset {
    border: 1px solid #cfd8e3;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    padding: 3px 6px;
}


/* ============================================================
   ЧАТ УЧАСТНИКОВ ФИРМЫ - панель справа (см. 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-title { flex: 1; }
.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-files-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.task-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef3f8;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 14px;
}
.task-file-chip button {
    border: none;
    background: none;
    cursor: pointer;
    color: #c0392b;
    font-size: 14px;
}
.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-new-group {
    width: 100%;
    border: 1px dashed #b9c6d4;
    background: #f7fafc;
    color: #2c3e50;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}
.chat-new-group:hover { background: #eef4f9; }

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


/* ============================================================
   ПРАВИЛА РАЗНЕСЕНИЯ ПЛАТЕЖЕЙ: список, редактор, полоса о прогоне.
   ============================================================ */
.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; }
.btn-icon {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    color: #5a6472;
}
.btn-icon:hover { color: #1a2634; }
.btn-icon:disabled { opacity: 0.25; cursor: default; }

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

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


/* Строка под доской задач: сколько напоминалок ждут своего дня. */
.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; }


/* ШАПКА ОКНА «РЕАЛИЗАЦИИ» - КОМПАКТНАЯ (по правке - "места для
   основного текста вообще не остаётся"). Ряды сжаты по вертикали, а
   кнопки уменьшены до размера подписи: три ряда, каждый из которых
   переносился на вторую строку, съедали треть экрана. */
.rlz-head {
    gap: 10px;
    padding: 6px 12px;
    margin-bottom: 6px;
    row-gap: 6px;
}
.rlz-head .rlz-btn {
    padding: 5px 10px;
    font-size: 14px;
    height: auto;
}
.rlz-head label { font-size: 14px; }
.rlz-head input[type="date"] { padding: 4px 6px; }
.rlz-head input[type="file"] { max-width: 250px; font-size: 14px; }
/* Сводная строка (реализации / оплачено / закрыто) - в одну строку и
   без лишнего воздуха: она и так самая заметная. */
#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; }
.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 в общих
   таблицах. Одна и та же строка под курсором меняла цвет в
   зависимости от окна, и это читалось как «здесь что-то другое».

   Правило стоит В КОНЦЕ файла и потому побеждает все прежние - их не
   удаляю: они разбросаны по файлу вперемешку с рабочими стилями
   таблиц, и точечная чистка рискует задеть лишнее. Цвет один:
   спокойный голубой, заметный на белом и не спорящий с цветными
   строками статусов (оплачено/просрочено), у которых своя заливка.
   ============================================================ */
.data-table tbody tr:hover td,
.org-table tbody tr:hover td,
.payment-table tbody tr:hover td,
.deposit-table tbody tr:hover td,
#results tbody tr:hover td,
#bankModal .data-table tbody tr:hover td,
.acts-compare-table tbody tr:hover td,
.rules-table tbody tr:hover td {
    background: var(--row-hover) !important;
}
/* Цветные строки-статусы (оплачено, просрочено, разнесено) при
   наведении темнеют, а не теряют свой цвет: он и есть их смысл. */
.leasing-paid-row:hover td { background: #cdebd9 !important; }
.leasing-overdue-row:hover td { background: #f8d7d2 !important; }


/* ============================================================
   «С чего начать»: порядок работы на первом экране.
   Показывается новичку, пока он не нажал «Скрыть». Шаги отмечаются
   сами по загруженным данным - человек видит, где находится, а не
   читает инструкцию заново.
   ============================================================ */
.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;
}

/* --- ЖЁЛТАЯ. Медовая, а не лимонная: чистый жёлтый под белой
       надписью не читается вовсе, поэтому кнопки взяты в охристом
       тоне, а лёгкость даётся фоном и полями. --- */
body.theme-yellow {
    --accent: #c9a144;
    --accent-dark: #a8862f;
    --bg-app: #fdf8ec;
    --wc-c1: #ddc078;
    --wc-c2: #f0dfb2;
    --wc-c3: #faf1d9;
    --wc-text-main: #3f3620;
    --wc-text-sub: #6f6141;
    --wc-blue: #c1a052;
    --wc-teal: #cdb264;
    --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: #c9a144;
    --wc-green: #6aa870;
    --wc-green-status: #6aa87f;
    --th-info: #a98a44;      --th-info-h: #96793a;   /* правка 160 */
    --th-success: #b8933f;   --th-success-h: #a07e32;
    --th-secondary: #a99d84; --th-secondary-h: #948970;
    --th-warning: #d99a5b;
    --th-dark: #7d6529;
    --th-view: #927730;
    --th-purple: #9b8ac9;
    --th-deposit: #d0a95f;
    --th-mismatch: #c8827e;
    --th-field-border: #ecdcb4;
    --th-field-bg: #fffdf8;
    --th-head-bg: #f7ecd2;
    --th-row-hover: #fdf6e6;
    --th-line: #eadfc2;
    --th-soft-bg: #fdf9ef;
}

/* ------------------------------------------------------------
   ПРАВИЛА - общие для всех тем. Класс .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);
}
body.ui-themed .data-table tbody tr:hover td,
body.ui-themed .org-table tbody tr:hover td,
body.ui-themed .payment-table tbody tr:hover td,
body.ui-themed .deposit-table tbody tr:hover td,
body.ui-themed #results tbody tr:hover td,
body.ui-themed #bankModal .data-table tbody tr:hover td,
body.ui-themed .rules-table tbody tr:hover td {
    background: var(--th-row-hover) !important;
}

/* --- Вкладки --- */
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; }
.lock-badge {
    display: inline-block;
    background: #fdf3e3;
    border: 1px solid #f0dcb8;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 14px;
    color: #6b4a1e;
    margin-left: 6px;
}


/* Узкий столбец валюты в договорах лизинга (по правке - «узенький
   столбик»). Список короткий, поэтому и поле маленькое: широкое
   отняло бы место у сумм и названий. */
.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-in-cal {
    font-size: 14px;
    background: #eafaf1;
    border: 1px solid #cdebd9;
    border-radius: 10px;
    padding: 1px 8px;
    color: #1d7240;
}
.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 .data-table tr:hover td,
body.ui-themed .org-table tr: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 .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;
    --arrow-bg: rgba(255, 255, 255, 0.55);
    --arrow-bg-hover: rgba(255, 255, 255, 0.85);
    --arrow-ink: #525c69;
}
.hscroll-wrap { position: relative; }
.hscroll-wrap > *::-webkit-scrollbar { height: 0; }
.hscroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    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); }
.clear-filters-btn { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.clear-filters-btn:hover { background: #fdf3f2; border-color: #e5b8b4; color: var(--bad); }
.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 {
    --ok-soft: #367556;
    --bad-soft: #a94741;
}
.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;
}
.sidebar .btn-group .btn.sidebar-btn-active {
    background: var(--brand-soft) !important;
    color: var(--brand) !important;
    box-shadow: inset 2px 0 0 var(--brand) !important;
}

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


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

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

/* ЛИЗИНГ: ШАПКА ТАБЛИЦЫ НЕ УЕЗЖАЕТ, СТРОКИ НЕ РАСПУХАЮТ.
   Её правка 09.09.2026: «закрепи шапку, чтобы не уезжала вверх» и
   «плашка "оплачено" расширяет строки - сделай её по ширине строки».
   Прокручивается только ящик с таблицей: если ездит само окно, липкая
   шапка уезжает вместе с ним (та же беда была в платёжном календаре). */
#leasingModal .modal-body { overflow: hidden; }
#lzTableBody, #lzContractsBody, #lzPortfolioBody, #lzAllPaymentsBody {
    overflow: auto;
    max-height: calc(100vh - 320px);
}
#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; }
#allocateModal .modal-header h2, #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 { 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 встала бы перед заголовком. */
#allocateModal .modal-header h2 { order: 1; }
#allocateModal #allocateRulesBtn { order: 2; }
#allocateModal .modal-close { order: 3; }

/* ============================================================
   «📤 ЗАГРУЗИТЬ ПК»: СПИСОК ПОД КНОПКОЙ И ОКНО ПЕРЕД ЗАГРУЗКОЙ
   (правка 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; }
.letter-rule-hint { font-size: 14px; color: #425264; margin-bottom: 6px; }
/* Ряд заполняется целиком: ширина колонки не меньше 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 здесь по той же
   причине: она обязана перебить и зебру, и цвет «оплачено».

   Поля ввода внутри ячейки делаем прозрачными, иначе белые прямоугольники
   закрывают почти всю строку и подсветка видна только по краям.
   ============================================================ */
#tableTab .payment-table tbody tr:hover > td {
    background: var(--row-hover-strong, #BFE6F0) !important;
}
#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;
}
#tableTab .payment-table tbody tr > td { border-bottom: 1px solid #e6edf3; }
/* Просрочено - розовая строка и красная полоса слева. Плотность - её
   выбор 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;
}
/* ТЕКСТ ВЕЗДЕ ЧЁРНЫЙ (её правка 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; }
#tableTab .payment-table tbody td.cal-wrap-cell > input,
#tableTab .payment-table tbody td.cal-wrap-cell > textarea { 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 > input,
#tableTab .payment-table tbody td.cal-wrap-cell.cal-wrap-editing > textarea { display: block; }
/* Назначение во время правки - целиком, без прокрутки (высота по тексту). */
#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 tbody tr:nth-child(even) > td { background: #f6f9fb; }
#lzContractsBody .data-table tbody tr:hover > td { background: var(--row-hover-strong, #BFE6F0) !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;
}

/* Переключатель «напоминалка» в шапке задачника (правка 230). Шапка -
   flex со space-between, поэтому порядок задан явно: заголовок,
   переключатель, крестик. */
#tasksModal .modal-header h2 { order: 1; }
#tasksModal .tasks-header-check { order: 2; margin-right: auto; margin-left: 18px; }
#tasksModal .modal-close { order: 3; }
.tasks-header-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    white-space: nowrap;
}

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


/* ============================================================
   ПЛАТЁЖНЫЙ КАЛЕНДАРЬ КАК ЛИСТ 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. Выделение сильнее зебры, «оплачено/просрочено» и
   подсветки под мышью; поля внутри строки прозрачные, иначе белые
   прямоугольники закрывают цвет. Выбранная ячейка календаря (рамка)
   остаётся видна поверх.
   ============================================================ */
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,
.list-item.row-selected,
.list-item.row-selected:hover {
    background: #B9E2EA !important;
}
table tbody tr.row-selected > td input:not([type="checkbox"]):not(:focus),
table tbody tr.row-selected > td select:not(:focus),
table tbody tr.row-selected > td textarea:not(:focus),
#tableTab .payment-table tbody tr.row-selected > td .cal-wrap-view {
    background: transparent !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; }
.inv-task-open { overflow: visible !important; text-overflow: clip !important; }
.inv-task-open a { color: var(--bg-ink, #0B4F5E); font-weight: 600; text-decoration: none; }
.inv-task-open a:hover { text-decoration: underline; }
/* Кнопки действия в строке - компактные, строка не растёт в высоту. */
.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; }
.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-modes { display: flex; gap: 16px; margin: 6px 0 18px; flex-wrap: wrap; }
.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; }
.tour-mode-emoji { font-size: 34px; line-height: 1; }
.tour-mode-learn { background: #FFF8EC; border-color: #EBD3A4; }
.tour-mode-learn:hover { background: #FFF2DC; border-color: #E4B363; }

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