/* --- Blazor framework styles (template) --- */
h1:focus { outline: none; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 12px; }
.blazor-error-boundary {
    background: #b32121; padding: 1rem; color: white;
}
.blazor-error-boundary::after { content: "Произошла ошибка."; }

/* --- Finka UI --- */
:root {
    --bg: #d9e7f3;
    --card: #fff;
    --line: #e2e5ea;
    --ink: #1f2430;
    --muted: #6b7280;
    --accent: #2563eb;
    --ok-bg: #e7f7ec; --ok-fg: #11804a;
    --warn-bg: #fdf0e3; --warn-fg: #b9590b;
    --err-bg: #fde7e7; --err-fg: #b91c1c;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
}
/* Приложение на всю высоту окна: шапка сверху, контент занимает остаток —
   таблица внутри контента растягивается до низа окна (без ручных --above-h).
   dvh вместо vh: на планшете/телефоне 100vh не учитывает адресную строку и нижнюю панель
   браузера — интерфейс получался выше видимой области и низ уезжал под панель (приходилось
   подкручивать страницу). 100vh оставлен первым как запасной для старых браузеров. */
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
    display: flex; flex-direction: column;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 6px 16px 0;
}
/* Ряд 1: бренд + админ/юзер/выход справа. Ряд 2: инструменты — одна строка со скроллом вправо. */
.topbar-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 6px; }
.topbar-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-left: auto; }
/* Полосу прокрутки прячем у блока итогов (он скроллится одной строкой) */
.summary-bar { scrollbar-width: none; -ms-overflow-style: none; }
.summary-bar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.topbar .brand { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }

/* Лёгкое оттенение блоков на лазурном фоне */
.summary-bar, .table-scroll, .card { box-shadow: 0 2px 9px rgba(31, 45, 70, .10); }
.topbar nav { display: flex; gap: 4px; align-items: flex-end; flex-wrap: wrap; }
/* Вкладки шапки как ярлыки файла: активная — цвета окна, «приклеена» к содержимому. Шрифт — узкий (condensed). */
.navtab {
    font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", system-ui, sans-serif;
    font-stretch: condensed;
    font-size: 16px; padding: 9px 16px; color: var(--muted); text-decoration: none;
    background: transparent; border: 1px solid transparent; border-bottom: none;
    border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.navtab:hover { color: var(--ink); }
/* Выделена только активная вкладка — «ярлык» в цвет окна, приклеенный к содержимому */
.navtab.active { background: var(--bg); color: var(--ink); font-weight: 700; border-color: var(--line);
    position: relative; z-index: 21; box-shadow: 0 -8px 14px -6px rgba(31, 45, 70, .20); }

.content { max-width: none; margin: 0; padding: 14px 16px 6px; box-shadow: 0 -4px 14px rgba(31, 45, 70, .16);
    flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
h1 { font-size: 22px; margin: 0 0 16px; }
.muted { color: var(--muted); }

.page-head { display: flex; align-items: center; justify-content: space-between; }

.btn, .btn-secondary, .btn-success {
    display: inline-block; border: none; border-radius: 6px; cursor: pointer;
    padding: 8px 14px; font-size: 14px; text-decoration: none;
}
.btn { background: var(--accent); color: #fff; }
.btn:hover { background: #1d4fd0; }
.btn-secondary { background: #eef0f3; color: var(--ink); }
.btn-success { background: #2e7d32; color: #fff; }
.btn-success:hover { background: #256628; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }

/* Компактные итоги таблицы в одну строку */
.summary-bar {
    display: flex; flex-wrap: nowrap; gap: 13px; align-items: baseline;
    padding: 7px 12px; margin: 0 0 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    font-size: 14px; white-space: nowrap; overflow-x: auto;
}
.summary-bar span { color: var(--muted); display: inline-flex; gap: 4px; align-items: baseline; }
.summary-bar b { font-weight: 700; font-size: 15px; color: #1f2328; word-spacing: -0.18em; }
.summary-bar .amount-in { color: var(--ok-fg); }
.summary-bar .amount-out { color: var(--err-fg); }
/* Узкий (condensed) шрифт: панель отчётов (надписи и цифры) + всё содержимое таблиц */
.summary-bar, .grid th, .grid td, .grid select, .grid input, .coef-input {
    font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", system-ui, sans-serif;
    font-stretch: condensed; font-variant-numeric: tabular-nums;
}
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.card-value { font-size: 24px; font-weight: 700; }
.card-label { color: var(--muted); margin-top: 4px; font-size: 13px; }

.filters { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; flex-wrap: wrap; }
/* Финансы: разрешаем перенос текста в верхней таблице (чтобы влезала без гориз. скролла); субтаблица не затрагивается */
.fin-table > thead > tr > th, .fin-table > tbody > tr > td { white-space: normal; overflow-wrap: break-word; }
/* Подвкладки + панель действий (флаги, + заказ/отгрузка) в одну строку: действия справа от подвкладок */
.tabs-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 0 0 8px; }
.tabs-row .tabs-row-actions { margin: 0; padding-bottom: 3px; flex: 1 1 auto; }
.filters input:not([type=checkbox]), .filters select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; }
.filters input:not([type=checkbox]) { min-width: 260px; }
.filters label { display: inline-flex; align-items: center; gap: 5px; }
.filters label input[type=checkbox] { margin: 0; }

table.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
/* Прокручиваются только строки: контейнер таблицы со своей высотой + липкая шапка */
.table-scroll { overflow: auto; flex: 1 1 0; min-height: 0; min-width: 0;
    border: 1px solid var(--line); border-radius: 10px; }
.table-scroll > .grid { border: none; border-radius: 0; overflow: visible; }
.table-scroll .grid thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--line); }
.grid th, .grid td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid th { background: #fafbfc; color: var(--muted); font-weight: 600; }
/* Мягкая подсветка строки под курсором (поверх любого цвета строки) */
/* Hover красит ТОЛЬКО прямые ячейки строки (> td). Без child-комбинатора наведение на
   строку-обёртку разворота (ap-expand-row) подсвечивало ВСЕ вложенные td субтаблицы. */
.grid tbody tr:hover > td { background-color: rgba(43, 108, 176, .09); }
/* Разворот проекта: наведение не подсвечивает ничего — ни обёртку, ни строки субтаблицы.
   Каждая строка держит свой фон (услуга — голубой inline, «Итого» — серый, прочие — фон обёртки). */
.grid tbody tr.ap-expand-row:hover > td { background-color: transparent; }
.ap-unify tbody tr:hover > td { background-color: transparent; }
/* Строка «Итого» под позициями: отделена сверху, серый фон и в покое, и под курсором. */
.ap-unify tbody tr.ap-total-row > td { border-top: 2px solid #d5dde8; background-color: #eef3fa; }
/* Строка-заголовок версии комплектации (ver.1 / ver.2+): голубоватый фон, стабильный при наведении. */
.ap-unify tbody tr.ap-ver-row > td { background-color: #eef4fb; border-top: 1px solid #dbe6f3; }
/* Развёрнутая таблица отгрузки: длинное название позиции/товара переносится (иначе строка уходит вправо). */
.ship-detail td:first-child, .ship-detail th:first-child { white-space: normal; overflow-wrap: break-word; max-width: 360px; }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid tr:last-child td { border-bottom: none; }
.row-warn { background: #fffaf3; }
.grid a { color: var(--accent); text-decoration: none; }
.grid input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; }
/* Каталог: тонкие границы у всех ячеек (сетка) вместо зебры/полос */
.grid-bordered th, .grid-bordered td { border: 1px solid var(--line); }
.grid-bordered tr:last-child td { border-bottom: 1px solid var(--line); }
/* Убрать стрелки-спиннеры у числовых полей сумм в строках (Chrome/Edge/Safari + Firefox) */
.grid input[type=number]::-webkit-inner-spin-button,
.grid input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.grid input[type=number] { -moz-appearance: textfield; appearance: textfield; }
/* Флаги ячеек (жёлтые) + кнопка-флаг + обводка строки при переходе */
.grid td.cell-flag { background: #ffe000 !important; }
.grid td.cell-flag-r { background: #ff4d4d !important; }
.grid td.cell-active { outline: 2px solid #1976d2; outline-offset: -2px; }
.flag-btn { background: #ffd54f; border: 1px solid #e0b400; border-radius: 5px; width: 32px; height: 30px; font-size: 15px; line-height: 1; cursor: pointer; }
.flag-btn:hover { background: #ffca28; }
.grid tr.row-focus > td { box-shadow: inset 0 0 0 2px #1976d2; }
/* Узкий столбец «Ручная» */
.grid th.manual-col, .grid td.manual-col { width: 30px; text-align: center; padding-left: 2px; padding-right: 2px; }
/* Жёлтые итоги (содержат помеченную сумму) + строки поп-апа флагов */
.summary-bar .total-flag { background: #fff176; border-radius: 4px; padding: 0 5px; cursor: pointer; }
.flag-row { cursor: pointer; }
.flag-row:hover > td { background: #fff8e1; }
.flags-block { background: #fff176; border: 1px solid #e0b400; border-radius: 8px; padding: 11px 16px; margin-bottom: 14px; font-weight: 600; cursor: pointer; }
.flags-block:hover { background: #ffe082; }
/* Поячейное выделение жёлтым/красным на Проектах/Товарах (как флаг ячеек в Движениях) */
.grid td.hl-y { background: #ffe000 !important; }
.grid td.hl-r { background: #ff4d4d !important; }
.grid td.hl-sel { outline: 2px solid #1976d2; outline-offset: -2px; cursor: pointer; }
.flag-btn-r { background: #ef9a9a; border-color: #c62828; }
.flag-btn-r:hover { background: #e57373; }
.flag-filter { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.grid td.link-cell { cursor: pointer; }
.grid td.link-cell:hover { text-decoration: underline; }

.amount-in { color: #ff7a18; }
.amount-out { color: var(--err-fg); }
.desc-cell { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Всплывающая подсказка с полным текстом ячейки (клик/тап) */
.cell-tip {
    position: absolute; z-index: 90; max-width: min(92vw, 460px);
    background: #1f2430; color: #fff; padding: 7px 11px; border-radius: 7px;
    font-size: 13px; line-height: 1.35; white-space: normal; word-break: break-word;
    box-shadow: 0 10px 30px rgba(20, 28, 40, .4);
}

/* Вкладки фирма × направление */
.tabs-wrap { display: flex; align-items: center; gap: 3px; margin: 4px 0 16px; }
.tabs { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; overflow-x: auto; flex: 0 1 auto; min-width: 0; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-nav { display: none; flex: 0 0 auto; border: 1px solid var(--line); background: #fff; cursor: pointer;
    border-radius: 6px; padding: 3px 9px; font-size: 17px; line-height: 1; color: #555; }
.tabs-wrap.overflow .tab-nav { display: inline-flex; }
.tab-nav:hover { background: #f0f4f9; }
.tab-add { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; cursor: pointer;
    border-radius: 6px; padding: 3px 11px; font-size: 18px; line-height: 1; color: var(--accent); }
.tab-add:hover { background: #eef4fb; }
.tab {
    padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; flex: 0 0 auto;
    background: #fff; color: var(--ink); text-decoration: none; white-space: nowrap;
    font-family: "Arial Narrow", "Liberation Sans Narrow", "Roboto Condensed", system-ui, sans-serif;
    font-stretch: condensed; font-size: 15px; font-weight: 600;
}
.tab:hover { border-color: var(--accent); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab-main { font-weight: 700; }
/* Служебная вкладка «Без разделов» — оранжевая плашка (активная — насыщенная). */
.tab-uncat { background: #ffe0b2; border-color: #ffb74d; color: #e65100; }
.tab-uncat:hover { border-color: #e65100; }
.tab-uncat.active { background: #e65100; border-color: #e65100; color: #fff; }
.tab-count { opacity: .7; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* Активная вкладка + её иконки (✎ 🗑) — единая акцентная «пилюля» */
.tab-group { display: inline-flex; align-items: stretch; flex: 0 0 auto; }
.tab-group.active .tab { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.tab-acts { display: inline-flex; align-items: stretch; background: #fff;
    border: 1px solid var(--accent); border-left: none;
    border-top-right-radius: 6px; border-bottom-right-radius: 6px; padding: 0 1px; }
.tab-acts .tab-icon { color: var(--accent); line-height: 1; padding: 0 7px; background: none; border: none; cursor: pointer; border-radius: 0; display: inline-flex; align-items: center; }
.tab-acts .tab-icon:hover { background: #eef4fb; }
.tab-acts .ico { width: 16px; height: 16px; }

/* Иконки-действия в строке таблицы: ⏻ вкл/выкл, ✎ правка */
.row-act { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 5px; color: #9098a0; }
.row-act:hover { color: var(--accent); }
.row-act.off { color: var(--err-fg); }
.row-act.danger { color: #c0392b; }
.row-act.ok { color: #2e9e5b; }
.row-act.ok:hover { color: #25864c; }
.row-act.danger:hover { color: #e74c3c; }
.ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; pointer-events: none; }

/* Панель перестановки/добавления вкладок */
.tab-tools { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.tab-tools .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.tab-tools input { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; }

/* Соединённые кнопки-переключатели направления */
.seg { display: inline-flex; }
.seg button { border: 1px solid var(--line); background: #fff; padding: 7px 14px; cursor: pointer; font-size: 13px; }
.seg button:first-child { border-radius: 6px 0 0 6px; }
.seg button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.seg button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Компактная таблица: одна строка, без высоких ячеек */
.grid-tight th, .grid-tight td { white-space: nowrap; padding: 4px 8px; }
.grid-tight select { max-width: 140px; }
/* Контрагент — фиксированная ширина (≈ «ИП КИБАРДИН МАТВЕЙ ВЛАДИМИРОВИЧ») */
.grid-tight .cp-col { width: var(--w-cp, 70%); max-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Назначение — тянется по оставшейся ширине */
.grid-tight .desc-col { width: var(--w-desc, 110%); max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row-actions { white-space: nowrap; }
.row-actions a, .row-actions button { margin-left: 6px; }

/* Отключённая строка: видна, но бледная и вне расчёта */
.row-off { opacity: .5; background: #fafafa; }
.row-off td { color: var(--muted); }

/* Перевод между своими счетами — только курсив, цвет/фон как у обычных строк */

/* Ручная операция (заведена в интерфейсе) — голубой фон */
.row-manual { background: #e7f0ff; }

/* Приход — без подсветки строки; выделяется плашкой «приход» в столбце Тип */
.badge.in { background: #ff7a18; color: #fff; }

/* Только что восстановленные из корзины — ярко-жёлтым, чтобы легко найти (~2 часа) */
.row-restored td { background: #ffec3d !important; }

/* Синтетические (зеркальные) строки зависимых фирм — ярко-розовым, чтобы заметить и при желании выключить */
.row-derived { background: #ffc6e2; }

/* Управление текущей вкладкой (переименовать/удалить) */
/* Прижато вправо, вплотную слева от поля добавления вкладки */
.tab-edit { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding-right: 10px; border-right: 1px solid var(--border); }
.tab-edit input { width: 130px; padding: 2px 6px; }
.tab-edit .link-danger { font-size: .9em; }

/* Поле поиска с крестиком очистки внутри */
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box input { padding-right: 24px; }
.search-box .clear-x {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    border: none; background: none; cursor: pointer; color: var(--muted);
    font-size: 17px; line-height: 1; padding: 0 4px;
}
.search-box .clear-x:hover { color: var(--fg); }

/* Обработанная строка (галочка слева) — приглушена */
.row-processed td { opacity: .5; }

/* Панель массовых действий — зафиксирована вверху, мягкий фон */
.sel-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 16px;
    background: #eef1f6; color: var(--fg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 5px rgba(0,0,0,.08);
}
.sel-bar select { padding: 3px 6px; border-radius: 4px; }
.sel-bar .sel-spacer { flex: 1 1 auto; }
.proc-col { width: 30px; text-align: center; padding: 2px 4px; }
.proc-col input { cursor: pointer; }

/* Форма создания новой (проходной) позиции прямо в попапе заказа */
.new-line-form {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px 8px;
    padding: 10px; margin: 0 0 8px;
    background: #f2f6fc; border: 1px solid var(--border); border-radius: 6px;
}
.new-line-form label { display: flex; flex-direction: column; font-size: .8em; color: var(--muted, #667); gap: 2px; min-width: 0; }
.new-line-form input, .new-line-form select { padding: 4px 6px; width: 100%; min-width: 0; box-sizing: border-box; }

/* Компактный инпут количества в списке каталога попапа — тонкие строки */
.kit-pop td { padding-top: 1px; padding-bottom: 1px; }
.kit-pop input.qty-in { width: 4.5em; box-sizing: border-box; padding: 1px 5px; text-align: right; }

/* Значок-подсказка «i» рядом с заблокированной кнопкой */
.info-i { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; border: 1px solid #d09; background: #fde; color: #a26; font: italic 700 12px/1 Georgia, serif;
    cursor: help; flex: 0 0 auto; }
.info-i:hover { background: #fbcfe0; }

/* Значок «состав комплекта» (6 квадратиков + стрелка вниз) в строке позиции проекта */
.kit-btn { border: none; background: transparent; cursor: pointer; padding: 1px 3px; margin-left: 6px;
    vertical-align: -3px; color: var(--muted, #667); border-radius: 4px; }
.kit-btn:hover { background: rgba(25,118,210,.14); color: #1976d2; }
.kit-ico { width: 15px; height: 14px; }
.kit-cnt { font-size: .72em; color: var(--muted, #667); margin-left: 1px; vertical-align: 1px; }

/* Строка-заголовок категории в каталоге */
.cat-head td { background: #e3e9f2; font-weight: 700; padding: 5px 10px; border-top: 2px solid var(--border); }
.cat-head .cat-count { font-weight: 400; color: var(--muted, #667); font-size: .85em; margin-left: 6px; }
/* Конфликт: ручной раздел отличается от раздела-фильтра — ячейка красная */

/* Кнопка возврата вверх страницы */
html { scroll-behavior: smooth; }
.scroll-top {
    position: fixed; right: 322px; bottom: 22px; width: 42px; height: 42px;
    border-radius: 50%; background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.22);
    z-index: 50; opacity: .82; border: none; cursor: pointer; padding: 0;
}
.scroll-top:hover { opacity: 1; }

/* Кнопки сейвов в шапке */
.saveload { display: inline-flex; gap: 2px; align-items: center; }

/* Модальные окна (сохранение/загрузка базы) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,28,40,.38); z-index: 80; }
.modal {
    position: fixed; z-index: 81; top: 64px; left: 50%; transform: translateX(-50%);
    width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 14px 44px rgba(20,28,40,.30);
}
.modal-head { padding: 14px 18px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.modal-foot { padding: 12px 18px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--line); }
.modal-body .modal-foot { border-top: none; padding: 8px 0 0; }
.modal-label { font-size: 13px; color: var(--muted); }
.modal-input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.modal-input:focus { outline: none; border-color: var(--accent); }
.small { font-size: 12px; }
.warn-text { color: var(--warn-fg); font-weight: 600; }
.btn-danger { background: #e0524a; color: #fff; border: none; border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.btn-danger:hover { background: #c8453d; }
.save-list { display: flex; flex-direction: column; gap: 6px; }
.save-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.save-row:hover { background: #f6f8fb; }
.save-info { flex: 1 1 auto; min-width: 0; }
.save-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

/* Строка inline-редактирования */
.row-edit td { background: #fff8e1; padding: 3px 6px; }
.row-edit input, .row-edit select { width: 100%; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 13px; }

.tab { cursor: grab; }
.tab:active { cursor: grabbing; }

/* Панель видимости столбцов */
.cols-panel {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    padding: 10px 14px; margin: 2px 0 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.cols-panel label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink); }
.cols-panel input, .cols-panel select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* Иконки-кнопки (глазик, карандаш, корзина) */
.icon-btn, .tab-icon {
    border: none; background: none; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 4px 7px; border-radius: 6px; color: var(--ink);
}
.icon-btn:hover, .tab-icon:hover { background: rgba(0,0,0,.08); }

/* Выпадашка (столбцы / доп. фильтры) — плавающая панель под кнопкой */
.cols-dd { position: relative; display: inline-flex; }
/* Прозрачная подложка — клик вне выпадашки закрывает её */
.dd-backdrop { position: fixed; inset: 0; z-index: 44; }
.dd-sep { font-size: 11px; color: var(--muted); margin: 7px 0 2px; padding-top: 6px; border-top: 1px solid #eee; text-transform: uppercase; letter-spacing: .04em; }

/* Выпадашка истории изменений */
.hist-panel { min-width: 290px; max-height: 55vh; max-height: 55dvh; font-size: 12px; }
.hist-item { padding: 4px 0; border-bottom: 1px solid #f1f1f1; white-space: nowrap; }
.hist-item.undone { opacity: .45; text-decoration: line-through; }

/* Отменить/Вернуть в шапке (крупные кнопки рядом с именем пользователя) */
.undoredo { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.ur-btn { border: 1px solid #d4d8de; background: #fff; cursor: pointer; font-size: 20px;
          line-height: 1; padding: 5px 11px; border-radius: 8px; color: #2b6cb0; }
.ur-btn:hover:not(:disabled) { background: #eef4fb; }
.ur-btn:disabled { color: #c4cad2; cursor: default; }
.ur-hist { font-size: 16px; color: #5a5f66; padding: 6px 9px; }
.undoredo .cols-panel { right: 0; left: auto; }

/* Масштаб текста таблицы и итогов (управляется из шапки) */
.grid, .summary-bar { zoom: var(--tbl-zoom, 1); }
.zoom-ctl { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; }
.zoom-btn { border: 1px solid #d4d8de; background: #fff; cursor: pointer; font-size: 16px;
    line-height: 1; padding: 4px 9px; border-radius: 8px; color: #444; }
.zoom-btn:hover { background: #eef4fb; }
.zoom-val { font-size: 12px; color: #555; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }

/* Инлайн-поле коэффициента себестоимости в Разделах — узкое (под 4 символа), без стрелок */
/* Сильнее, чем «.grid input» (стр. 101), иначе оно перебивает ширину и отступы.
   Высота ниже селектов раздела/проекта, чтобы строка не росла при показе столбца «Коэф». */
.grid input.coef-input { width: 42px; min-width: 0; text-align: right; padding: 0 3px;
    height: 18px; line-height: 16px; font-size: 13px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 4px; vertical-align: middle; margin: 0; }
.grid td:has(> .coef-input) { line-height: 1; }

/* Поле комментария: прозрачное, проявляется при наведении/фокусе; не растит высоту строк */
.grid-tight .comment-col { width: var(--w-comment, 90%); max-width: 0; min-width: 0; overflow: hidden; }
.grid th.cp-col, .grid th.desc-col { position: relative; }
/* Регулируемая ширина колонки «Наименование» (Заказы/Отгрузки, раздельно); Комментарий — остаток */
.grid-tight .rz-name-o { width: var(--w-oname-o, 280px); max-width: var(--w-oname-o, 280px); }
.grid-tight .rz-name-s { width: var(--w-oname-s, 280px); max-width: var(--w-oname-s, 280px); }
.grid-tight .rz-name-o, .grid-tight .rz-name-s { min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid th.rz-name-o, .grid th.rz-name-s { position: relative; min-width: 90px; }
/* Ресайз пары имя↔комментарий (эталон — Движения): обе колонки резиновые в %, ползунок перераспределяет.
   scope: s=Отгрузки, o=Заказы, p=Все проекты, f=Финансы. */
.grid-tight [class*="rzp-name-"], .grid-tight [class*="rzp-comment-"] { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-tight .rzp-name-s { width: var(--w-nm-s, 34%); } .grid-tight .rzp-comment-s { width: var(--w-cm-s, 22%); }
.grid-tight .rzp-name-o { width: var(--w-nm-o, 34%); } .grid-tight .rzp-comment-o { width: var(--w-cm-o, 22%); }
.grid-tight .rzp-name-p { width: var(--w-nm-p, 34%); } .grid-tight .rzp-comment-p { width: var(--w-cm-p, 22%); }
.grid-tight .rzp-name-f { width: var(--w-nm-f, 34%); } .grid-tight .rzp-comment-f { width: var(--w-cm-f, 22%); }
/* Объект в «Все проекты»: регулируемая ширина + ПЕРЕНОС текста (строки и так высокие) */
.grid-tight .rz-name-p { width: var(--w-oname-p, 320px); max-width: var(--w-oname-p, 320px); min-width: 120px; white-space: normal; overflow-wrap: break-word; vertical-align: middle; }
.grid th.rz-name-p { position: relative; min-width: 120px; }
.grid-tight .wrap-cell { white-space: normal; overflow-wrap: break-word; vertical-align: middle; }
/* «Все проекты»: комментарий — ЕДИНСТВЕННАЯ резиновая колонка (width:100% забирает весь остаток).
   Без этого таблица (table-layout:auto) при ресайзе «Проект/объект» перекраивала ширины всех
   соседних столбцов — они «разъезжались» и слева, и справа. */
.grid-tight .ap-comment-col { width: 100%; min-width: 160px; }
.col-resizer { position: absolute; top: 0; right: -3px; width: 8px; height: 100%; cursor: col-resize; z-index: 6; }
.col-resizer:hover { background: rgba(25,118,210,.3); }
.grid input.comment-input { width: 100%; min-width: 0; padding: 0 5px;
    height: 18px; line-height: 16px; font-size: 13px; box-sizing: border-box;
    border: 1px solid transparent; border-radius: 4px; background: transparent;
    vertical-align: middle; margin: 0; }
.grid input.comment-input:hover { border-color: var(--line); }
.grid input.comment-input:focus { border-color: var(--accent); background: #fff; outline: none; }
.grid td:has(> .comment-input) { line-height: 1; }
.cols-dd .cols-panel {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 45;
    flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 8px;
    margin: 0; min-width: 210px; max-height: 65vh; max-height: 65dvh; overflow: auto; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
}

/* Иконки управления текущей вкладкой + инлайн-переименование */
.tab-icon { font-size: 14px; padding: 4px 6px; }
.tab-editing { display: inline-flex; align-items: center; gap: 3px; }
.tab-rename { width: 140px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.rule-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: #eef0f3; border-radius: 14px; font-size: 12px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); margin-left: 4px; }
.badge.neutral { background: #eef0f3; color: var(--muted); }

.link-danger { background: none; border: none; color: var(--err-fg); cursor: pointer; }

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; }
.form-grid input, .form-grid select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; color: var(--ink); }

.reconcile { padding: 10px 14px; border-radius: 8px; margin: 8px 0 20px; }
.reconcile.ok { background: var(--ok-bg); color: var(--ok-fg); }
.reconcile.warn { background: var(--warn-bg); color: var(--warn-fg); }

.issues { margin: 12px 0; }
.issue { padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; }
.issue-error { background: var(--err-bg); color: var(--err-fg); }
.issue-warn { background: var(--warn-bg); color: var(--warn-fg); }

.actions { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.saved { color: var(--ok-fg); }
h3 { margin: 22px 0 8px; }

/* Топбар: пользователь и выход */
.topbar-user { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.logout-form { margin: 0; display: inline; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 14px; }
.link:hover { text-decoration: underline; }

/* Страница входа */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 32px; width: 340px; display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.login-brand { font-size: 26px; font-weight: 700; text-align: center; }
.login-sub { color: var(--muted); text-align: center; font-size: 13px; margin-top: -8px; margin-bottom: 6px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 13px; }
.login-card input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.login-card .btn { margin-top: 6px; text-align: center; }

/* Самохостинг узкого шрифта Roboto Condensed (woff2 в /fonts) — чтобы узкий шрифт был и на мобиле */
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19a7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-1967DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19G7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-1927DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQk6YvM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19-7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19a7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-1967DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19G7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-1927DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DQk6YvNkeg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/rc-ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQk6YvM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Адаптив под узкий экран: ряды инструментов/вкладок/фильтров — горизонтальный скролл,
   а их выпадашки (доп-фильтры, столбцы, история отмен) — всплывающее окно по центру (не обрезается скроллом).
   На широком экране — обычные выпадашки и язычок вкладки, без скролла. === */
@media (max-width: 820px) {
    .topbar-tools, .topbar nav, .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .topbar-tools::-webkit-scrollbar, .topbar nav::-webkit-scrollbar, .filters::-webkit-scrollbar { width: 0; height: 0; display: none; }
    /* На узком — инструменты отдельной строкой; аккаунт остаётся справа в первой строке */
    .topbar-user { order: 2; margin-left: auto; }
    .topbar-tools { order: 3; flex-basis: 100%; margin-left: 0; padding-top: 2px; }
    .cols-dd .cols-panel {
        position: fixed; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%);
        max-width: 92vw; max-height: 80vh; max-height: 80dvh; overflow: auto; z-index: 82;
        box-shadow: 0 14px 44px rgba(20, 28, 40, .35);
    }
    /* Минимальная адекватная ширина текстовых столбцов на узком экране (не схлопывать) */
    .grid-tight .cp-col { min-width: 130px; white-space: nowrap; }
    .grid-tight .desc-col { min-width: 165px; white-space: nowrap; }
    .grid-tight .comment-col { min-width: 150px; }
}

/* === Сервисный рабочий стол товаров (3×3): Инвойсы / УПД / Каталог × список·товары·предпросмотр === */
.tab.tab-service { background: #0f766e; color: #fff; border-color: #0f766e; }
.tab.tab-service:hover { background: #0d6b63; border-color: #0d6b63; }
.tab.tab-service.active { background: #0a5750; border-color: #0a5750; }

.ws {
    display: grid; gap: 8px; overflow: auto;
    grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "ti tu tc"
        "il ul cp"
        "ig ug ct"
        "ip up ct";
    height: calc(100vh - 168px); height: calc(100dvh - 168px); min-height: 480px;
}
.ws-ti { grid-area: ti; } .ws-tu { grid-area: tu; } .ws-tc { grid-area: tc; }
.ws-il { grid-area: il; } .ws-ul { grid-area: ul; } .ws-cp { grid-area: cp; }
.ws-ig { grid-area: ig; } .ws-ug { grid-area: ug; } .ws-ct { grid-area: ct; }
.ws-ip { grid-area: ip; } .ws-up { grid-area: up; }
.ws-title { color: #fff; font-weight: 700; text-align: center; padding: 6px; border-radius: 8px; font-size: 15px; letter-spacing: .03em; }
.ws-title.inv { background: #2563eb; }
.ws-title.upd { background: #11804a; }
.ws-title.cat { background: #b9590b; }
.ws-pane { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: auto; box-shadow: 0 1px 4px rgba(31, 45, 70, .07); }
.ws-pane-h { position: sticky; top: 0; background: #f6f9fd; padding: 5px 9px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); z-index: 1; }
.ws-item { padding: 5px 9px; border-bottom: 1px solid #f0f2f5; }
.ws-il .ws-item, .ws-ul .ws-item { cursor: pointer; }
.ws-il .ws-item:hover, .ws-ul .ws-item:hover { background: #f0f6ff; }
.ws-item.sel { background: #e3efff; box-shadow: inset 3px 0 0 var(--accent); }
.ws-item-main { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-item-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-empty { padding: 14px 10px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.5; }
.ws-ct table.grid { font-size: 12px; border: none; border-radius: 0; }
/* Узкую вёрстку рабочего стола делаем позже — пока на узком просто горизонтальный скролл (колонки держат min 300px). */

/* Поля форм в модалках «Все проекты» */
.ap-fld { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); }
.ap-fld input { display: block; width: 100%; margin-top: 3px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; color: var(--ink); }

/* Поп-ап каталога (комплект позиции): узкое окно; столбец названий фикс 300px с переносом текста, кол-во вплотную рядом */
.kit-pop { table-layout: fixed; width: auto; }
.kit-pop th, .kit-pop td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-pop th:first-child, .kit-pop td:first-child { width: 300px; white-space: normal; word-break: break-word; overflow: visible; text-overflow: clip; vertical-align: middle; }
.kit-pop td input { width: 100%; }

/* «ВСЕ ПРОЕКТЫ» — единая таблица проекта: позиция продажи + раскрываемые под ней товары каталога */
.ap-unify .ap-pos-row > td, .ap-unify .ap-pos-row > td b { font-weight: 700; }
.ap-unify .ap-kit-row > td { font-weight: 400; }
.ap-unify .ap-kit-row > td { background: #f6f9fd; color: var(--muted); }
.ap-unify .ap-kit-row .ap-sub { padding-left: 22px; }
/* Компактные отступы между столбцами таблицы позиций */
.ap-unify td, .ap-unify th { padding-left: 2px !important; padding-right: 2px !important; }
/* Наименование позиции/товара (3-й столбец) — перенос по словам, не обрезка */
.ap-unify td:nth-child(3) { max-width: 340px; white-space: normal; overflow-wrap: break-word; vertical-align: middle; }
/* Строка добавления/правки позиции: колонку названия расширяем, чтобы длинная номенклатура была видна. */
.ap-unify tr.row-edit > td:nth-child(3) { max-width: 520px; width: 520px; }

/* Документы проекта: скрепка в колонках Счёт/УПД + модалка документов */
.doc-clip { margin-left: 4px; text-decoration: none; cursor: pointer; }
button.doc-clip-btn { border: none; background: none; padding: 0; font: inherit; cursor: pointer; }
.doc-clip .doc-cnt { font-size: 11px; vertical-align: super; color: var(--muted); margin-left: 1px; }
.docs-group { margin-bottom: 10px; }
.docs-group-h { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.docs-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.docs-row a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-upload { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border, #e5e9f0); }

/* Выпадашка документов по клику на 📎 в строке */
.doc-clip-wrap { position: relative; display: inline-block; }
.doc-dd { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 3px; min-width: 200px; max-width: 340px;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(31,45,70,.18); padding: 4px; }
.doc-dd a { display: block; padding: 5px 9px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-dd a:hover { background: rgba(0,0,0,.06); color: var(--accent); }
.doc-dd-back { position: fixed; inset: 0; z-index: 29; background: transparent; }

/* Выпадашка документов на Popover API: top-layer (не обрезается overflow-контейнером таблицы),
   встроенный light-dismiss (клик вне/Esc) не блокирует прокрутку. Позиция — у кнопки-якоря,
   с автопереворотом вверх, если внизу не помещается (position-try-fallbacks: flip-block). */
.doc-pop {
    position: absolute; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px;
    min-width: 210px; max-width: 360px; background: #fff; box-shadow: 0 6px 20px rgba(31,45,70,.18);
    position-area: bottom span-right; position-try-fallbacks: flip-block; position-try-order: most-height;
}
.doc-pop:popover-open { display: flex; flex-direction: column; }
.doc-pop > div { display: flex; align-items: center; gap: 4px; }
.doc-pop a { flex: 1; display: block; padding: 5px 9px; border-radius: 6px; text-decoration: none; color: var(--ink);
    font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-pop a:hover { background: rgba(0,0,0,.06); color: var(--accent); }

/* Загрузка счёта/УПД в окне редактирования проекта */
.ap-fld-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ap-doc { width: 220px; flex: none; }
.ap-doc-item { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 3px; }
.ap-doc-item a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--accent); }
.drop-zone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 78px; border: 1.5px dashed var(--line); border-radius: 8px;
    padding: 10px; text-align: center; font-size: 12px; line-height: 1.35; color: var(--muted); cursor: pointer; }
.drop-zone:hover, .drop-zone.drag { border-color: var(--accent); color: var(--accent); }
.drop-zone.drag { background: rgba(37,99,235,.06); }
.drop-zone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* «Все проекты» — столбец Заказчик: ширина между «по записи» и 2 ширинами заголовка (~168px).
   min-width держит столбец от пережатия авто-раскладкой (иначе слова дробятся в узкую колонку),
   max-width — потолок 2 ширины заголовка; длиннее — перенос по словам до 3 строк, дальше многоточие. */
.grid th.cust-col, .grid td.cust-col { min-width: 130px; max-width: 168px; white-space: normal; }
.grid td .cust-clamp {
    white-space: normal;   /* перебить nowrap от .grid-tight td — иначе не переносится */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;   /* переносить по словам, ломать слово только если само длиннее столбца */
}

/* Финансы — инпуты ручных коэффициентов (кИнт/кнИнт/кАиК): узкие, до ~6 символов. */
.coef-in { width: 56px; max-width: 56px; text-align: right; padding: 1px 4px; box-sizing: border-box; }

/* Каталог — textarea инвентаризации: ФИКСИРОВАННАЯ ширина (~1.5 ширины заголовка «Инвентаризация»),
   без ручного ресайза; высота растёт по содержимому (field-sizing), перенос строк сохраняется. */
.inv-in { width: 100%; padding: 2px 4px; border: 1px solid var(--line); border-radius: 4px;
    text-align: right; font: inherit; }
/* Инвентаризация и «Расход Факт» — служебные цифры пересчёта: бледнее основных данных таблицы.
   Селекторы с .grid — иначе перебивает общее правило «.grid input» (стр. 145). */
.grid input.inv-in, .grid td.expense-col { color: #8a8f98; }
/* «Инв.» — узкий числовой столбец: ровно по ширине заголовка */
.grid th.inv-col, .grid td.inv-col { width: 56px; max-width: 56px; }
/* Комментарий товара — фиксированная колонка в ДВЕ ширины заголовка, текст переносится */
.grid th.gcomment-col, .grid td.gcomment-col {
    width: 180px; max-width: 180px; white-space: normal; overflow-wrap: break-word; vertical-align: middle;
}
.gcomment-in { width: 100%; height: 24px; resize: none; padding: 2px 5px; white-space: pre-wrap;
    border: 1px solid var(--line); border-radius: 4px; font: inherit; overflow: hidden; line-height: 1.25; }

/* Разделы галочками (CategoryPicker): кнопка в ячейке + popover со списком */
.cat-pick { display: inline-block; width: 100%; }
.cat-pick-btn {
    width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 6px;
    padding: 4px 6px; font: inherit; color: inherit; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.cat-pick-btn:hover { border-color: var(--accent); }
.cat-pop {
    position: absolute; position-area: bottom span-right; margin: 2px 0 0;
    min-width: 220px; max-height: 60vh; max-height: 60dvh; overflow: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px;
    box-shadow: 0 10px 26px rgba(31, 45, 70, .18);
}
/* Всё содержимое popover — по левому краю: ячейки таблицы бывают выровнены вправо (class="num"),
   и без явного text-align галочки с подписями наследовали это выравнивание и «плясали». */
.cat-pop, .cat-pop * { text-align: left; }
.cat-pop-row {
    display: flex; gap: 7px; align-items: center; justify-content: flex-start;
    padding: 5px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
/* «.grid input { width:100% }» (стр. 145) растягивал галочку на всю строку и уводил подпись
   за край окошка — задаём чекбоксу свой размер сильнее правила таблицы. */
.cat-pop-row input[type=checkbox] { flex: 0 0 auto; width: 15px; min-width: 15px; height: 15px; padding: 0; margin: 0; }
.cat-pop-row span { flex: 1 1 auto; }
.cat-pop { width: max-content; }
.cat-pop-row:hover { background: #eef3fa; }
.cat-pop-row input { margin: 0; }