/* ============================================================
   АПС-МОНИТОР — рабочий стол (/crm): фирменный тёмный стиль
   Только токены base.css: --bg/--surface/--brand/--accent/--radius/--font-main.
   Каркас разделов (.screen, .object-card-popup, .archive-dialog, .event-modal,
   .context-menu, формы и кнопки) — из sidebar.css / forms.css / context-menu.css.
   Здесь — только раскладка рабочего стола и его шапка/навигация.
   ============================================================ */

body.crm-page {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 1.4;
}

/* --- Шапка рабочего стола --- */
.crm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    height: 54px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.crm-brand {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--brand);
}

.crm-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--text-secondary);
}

.crm-role {
    padding: 2px 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius);
}

.crm-link {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition, 0.2s);
}

.crm-link:hover {
    color: var(--accent-hover, var(--accent));
    text-decoration: underline;
}

.crm-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
    cursor: pointer;
    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s);
}

.crm-btn:hover {
    background: var(--surface-hover, var(--surface-2));
    border-color: var(--brand);
    color: var(--brand);
}

/* --- Раскладка: навигация слева + рабочая область --- */
.crm-main {
    display: flex;
    gap: 16px;
    padding: 16px;
    align-items: stretch;
    min-height: calc(100vh - 54px);
    box-sizing: border-box;
}

.crm-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 220px;
    flex: 0 0 220px;
    align-self: flex-start;
    position: sticky;
    top: 16px;
}

.crm-nav-item {
    text-align: left;
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 15px;
    cursor: pointer;
    transition: background var(--transition, 0.2s), border-color var(--transition, 0.2s), color var(--transition, 0.2s);
}

.crm-nav-item:hover {
    background: var(--surface-hover, var(--surface-2));
    border-color: var(--border);
}

.crm-nav-item.is-active {
    background: var(--surface-2);
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 600;
}

/* --- Рабочая область --- */
.crm-work {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    box-sizing: border-box;
}

/* Заглушки разделов (Объекты, Документы, ... ждут своих шагов плана). */
.crm-work h2 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text);
}

.crm-work p {
    margin: 0;
    color: var(--text-secondary);
}

/* Экраны разделов (фрагменты contractors/engineers): .screen/.active —
   из sidebar.css. Каждый раздел живёт в своём контейнере .crm-section
   (создаётся в static/js/crm/app.js, разделы не вытесняют друг друга).
   Правила ограничены прямыми детьми контейнера раздела, чтобы не задеть
   заголовки/тело карточек-попапов (они тоже содержат .sidebar-header/
   .sidebar-body и должны сохранить стиль sidebar.css). */
.crm-work > #crm-section-body {
    min-height: 0;
}

#crm-section-body > .crm-section > .screen > .sidebar-header {
    padding: 0 0 12px;
    background: transparent;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}

#crm-section-body > .crm-section > .screen > .sidebar-body {
    padding: 0;
}

/* Кнопка-индикатор «Загрузка…» на время fetch фрагмента. */
.crm-loading {
    padding: 24px;
    color: var(--text-secondary);
    text-align: center;
}

/* Кнопки «назад»/«закрыть» в шапке СПИСКА раздела: на карте они ведут в
   подменю раздела, на рабочем столе подменю нет — перехват в showScreen
   возвращает тот же список, то есть кнопка ничего не делает. Скрываем их.
   Кнопки мастера/карточки (id *-add-back/*-add-close/*-card-back/*-card-close)
   НЕ трогаем: они закрывают форму и возвращают к списку — это осмысленно. */
#contractors-back,
#contractors-close,
#engineers-back,
#engineers-close {
    display: none;
}

/* Панель действий раздела (кнопка создания над списком). */
.crm-section-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* Шапка Планера (переделка 2026-10-19): заголовок «Планер» убран. Колонки
   АДАПТИВНЫЕ, не 50/50: слева фильтры (занимают остаток ширины и тянутся),
   справа «кто я» — по содержимому, не сжимается (`auto`). Раньше при 1fr 1fr
   правая колонка съедала половину, фильтры сжимались, и переключатель видов
   обрезался (видна была одна кнопка). */
.planner-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: start;
    padding: 4px 0 8px;
}

/* Не хватает места на две колонки — шапка складывается в одну: фильтры
   сверху, «кто я» под ними (правая панель не сжимается в узкую полоску).
   Порог 1320px проверен замером: при 1280 рабочая область ~978px, и на две
   колонки не хватало места — «Добавить задачу» уезжала на третью строку.
   В одну колонку фильтры получают всю ширину, оба ряда идут по строке. */
@media (max-width: 1320px) {
    .planner-head {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Фильтры — три ряда: (1) поиск отдельной строкой, (2) поля фильтров,
   (3) область/вид/действия. Состав полей зависит от области (схема
   docs/architecture/Конструкция_фильтра_планера.drawio): «Мои задачи» —
   статус/приоритет/сотрудник, «Задачи компании» — те же плюс отдел. */
.planner-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Ряд 1 — «Поиск задач» отдельной строкой во всю ширину (требование владельца).
   Поиск не зависит от области, поэтому вынесен из сетки полей. */
.planner-search-row {
    display: flex;
    min-width: 0;
}

.planner-search-row > .crm-search {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Ряд 2 — ПОЛЯ ФИЛЬТРОВ, одинаковой ширины. Колонок 3 или 4 (по области) и
   они РАСТЯГИВАЮТСЯ поровну: auto-fit + minmax без потолка заполняет всю
   строку, поэтому пустых «дыр» нет ни в «Моих» (3 поля), ни в «Компании»
   (4 поля). Порог 155px подобран замером: подписи «Принято в работу» /
   «Все приоритеты» влезают без обрезки. */
.planner-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 8px;
    min-width: 0;
}

/* Поля внутри ряда: ширина задаётся сеткой, а не `.crm-search/.crm-select`
   (там `flex: 1 1 auto; min-width: 160px` — правило для строк других разделов). */
.planner-fields > .crm-search,
.planner-fields > .crm-select,
.planner-fields .planner-filter-field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Обёртка селекта «сотрудник» (скрывается по роли) — селект на всю ширину.
   display:flex перебивает UA-правило `[hidden] { display:none }` при равной
   специфичности, поэтому скрытие по роли задано явно (кейс H2, 2026-09-13). */
.planner-filter-field {
    display: flex;
}

.planner-filter-field[hidden] {
    display: none;
}

.planner-filter-field > .crm-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

/* Ряд 3 — область, вид и действия: по содержимому, без сжатия.
   Иначе «Таблица / Воронка / Календарь» обрезались до одной кнопки. */
.planner-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.planner-controls > .planner-view-toggle,
.planner-controls > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Узкая область (~1024px окно): четыре поля в строку уже не влезают — сетка
   auto-fit сама переходит на две колонки, без обрезки подписей селектов.
   Отдельного медиа-правила на 1100px не нужно: порог колонки (155px) задан
   общей сеткой и одинаково работает для трёх и четырёх полей. */

/* Блок «кто я» в планере: текст прижат к правому краю (требование 2026-10-19). */
.planner-user {
    text-align: right;
    min-width: 0;
}

.planner-user-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.planner-user-position {
    font-size: 13px;
    color: var(--text-secondary);
}

.planner-user-department {
    font-size: 12px;
    color: var(--text-muted);
}

/* Подсказка «учётка не привязана к сотруднику» (вместо ФИО/должности). */
.planner-user-hint,
.planner-link-hint {
    font-size: 13px;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    padding: 8px 12px;
}

/* Сообщение вместо пустого набора задач (учётка без привязки к сотруднику). */
.planner-link-hint {
    margin-bottom: 12px;
}

/* Вторая строка ячейки таблицы: должность · отдел ответственного — мельче,
   чтобы ФИО оставалось главным. */
.planner-table .planner-table-sub {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted);
    white-space: normal;
}

/* «Кто делает» в карточке воронки: видно всегда (в отличие от полей, которые
   раскрываются при наведении), но мелко — свёрнутый вид в 2–3 строки держится. */
.planner-funnel-card-who {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Тонкие права: элементы с data-perm="section:action" скрываются атрибутом
   hidden (ставит API.applyPermissionGates). Само правило видимости
   `[data-perm][hidden]` — глобальное, в base.css (нужно и на карте, и здесь).
   Источник правды — сервер (403 без права), здесь только UX-скрытие. */

/* ============================================================
   Раздел «Объекты» (новый модуль static/js/crm/objects.js)
   ============================================================ */
/* Поиск/фильтр раздела: инпут, селект и чекбокс в одной строке. */
.crm-search,
.crm-select {
    flex: 1 1 auto;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
}

.crm-search:focus,
.crm-select:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: var(--focus-ring);
}

.crm-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}

/* Строка списка объектов: переиспользует .personnel-item/.obj-info/.obj-name/.obj-address. */
.objects-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

.objects-contractor {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.objects-progress {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

.objects-status {
    padding: 2px 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    white-space: nowrap;
}

.objects-status-active {
    color: var(--success);
    border-color: var(--success);
}

.objects-status-archived {
    color: var(--text-secondary);
    border-color: var(--border);
}

.objects-actions {
    display: flex;
    gap: 6px;
    margin-left: 10px;
    flex: 0 0 auto;
}

/* Карточка объекта и строки списка объектов: кнопки записи скрываются по
   своим data-perm (objects:update/delete) — см. правило в base.css и
   API.applyPermissionGates. Прежний coarse-флаг crm-readonly здесь больше не
   используется (он не различал разделы). */
.objects-actions {
    /* контейнер кнопок действий строки (виден, если есть хоть одно право) */
}

/* ============================================================
   Раздел «Пользователи» (новый модуль static/js/crm/users.js)
   ============================================================ */
.users-search {
    flex: 1 1 auto;
    min-width: 160px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 14px;
}

.users-search:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Строка списка: переиспользует .personnel-item/.obj-info/.obj-name/.obj-address. */
.users-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

.users-role {
    padding: 2px 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--brand);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.users-status {
    padding: 2px 10px;
    border: 1px solid var(--border);
    font-size: 12px;
    white-space: nowrap;
}

.users-status-active {
    color: var(--success);
    border-color: var(--success);
}

.users-status-blocked {
    color: var(--danger-text);
    border-color: var(--danger);
}

.users-created {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}

/* Блок «Права доступа»: сетка «раздел × действие» (рабочие чекбоксы). */
.users-perms {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.users-perms-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand);
    margin-bottom: 6px;
}

.users-perms-note {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.users-perms-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.users-perms-grid th,
.users-perms-grid td {
    padding: 6px 8px;
    border: 1px solid var(--border);
    text-align: center;
    color: var(--text-secondary);
}

.users-perms-grid th:first-child,
.users-perms-grid td:first-child {
    text-align: left;
    color: var(--text);
}

.users-perms-grid input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--brand);
}

.users-perms-grid input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.users-perms-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* --- Планер: табличный редактор блоков шаблона (шаг 8) --- */

.planner-blocks-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.planner-blocks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.planner-blocks-table th,
.planner-blocks-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.planner-blocks-table th {
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.planner-blocks-table tr:last-child td {
    border-bottom: none;
}

.planner-blocks-table .planner-col-order {
    width: 28px;
    text-align: center;
    color: var(--text-secondary);
}

.planner-blocks-table .planner-col-req {
    width: 52px;
    text-align: center;
}

.planner-blocks-table .planner-col-actions {
    width: 96px;
    white-space: nowrap;
}

.planner-blocks-table input[type="text"],
.planner-blocks-table select {
    width: 100%;
    box-sizing: border-box;
}

.planner-block-btn {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 4px;
    width: 24px;
    height: 24px;
    line-height: 1;
    cursor: pointer;
    margin-right: 2px;
}

.planner-block-btn:hover:not(:disabled) {
    border-color: var(--accent, #4a90d9);
}

.planner-block-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.planner-muted {
    color: var(--text-secondary);
}

.planner-blocks-empty {
    padding: 10px;
    color: var(--text-secondary);
    font-size: 13px;
}

.planner-blocks-add {
    margin-top: 8px;
}

/* --- Планер: инспектор блока единого редактора (переделка 2026-10-10) --- */

.planner-canvas-who-chat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
}

.planner-canvas-reminder-who {
    min-width: 140px;
    box-sizing: border-box;
}

.planner-canvas-date {
    width: 100%;
    box-sizing: border-box;
}

.planner-canvas-weekdays label {
    color: var(--text-secondary);
}

/* --- Планер: табличный вид задач (Конструктор задач, шаг 7 §7) --- */

/* Переключатель вида «Таблица | Воронка | Календарь» и области задач —
   сегментные кнопки. Группа не сжимается (flex: 0 0 auto), кнопки не
   переносят текст (nowrap) — иначе сегмент обрезался при сжатии шапки. */
.planner-view-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.planner-view-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.planner-view-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.planner-view-btn.active {
    background: var(--brand);
    color: #fff;
}

/* --- Планер: вид «Воронка» задач (§7, каркас 2026-10-12) --- */

/* Канбан-доска: 4 колонки-стадии, горизонтальная прокрутка при нехватке места. */
.planner-funnel-view {
    margin-top: 4px;
}

.planner-funnel-board {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
}

.planner-funnel-column {
    flex: 1 1 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-height: 72vh;
}

.planner-funnel-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.planner-funnel-column-title {
    font-size: 13px;
    color: var(--text);
}

.planner-funnel-column-count {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-hover);
    border-radius: 10px;
    padding: 1px 8px;
    min-width: 20px;
    text-align: center;
}

/* Тело колонки: список карточек задач. */
.planner-funnel-column-body {
    list-style: none;
    margin: 0;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 60px;
}

.planner-funnel-empty {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    padding: 12px 4px;
}

/* Зона приёма drag&drop подсвечивается при наведении карточки. */
.planner-funnel-drop {
    background: var(--surface-hover);
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
}

/* Карточка задачи: те же поля, что в таблице, но вертикально. Свёрнута до
   двух строк («Задача», «Кто создал»); при наведении раскрывается целиком. */
.planner-funnel-card {
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Приоритет → цвет рамки (как у чипа календаря planner-calendar-chip-priority-*). */
.planner-funnel-card-priority-high {
    border: 2px solid #c9302c;
}

.planner-funnel-card-priority-medium {
    border: 2px solid #e0a021;
}

.planner-funnel-card-priority-low {
    border: 2px solid #449d44;
}

/* Свёрнуто: показываем только «ключевые» строки (Задача, Кто создал). */
.planner-funnel-card-field {
    display: none;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
}

.planner-funnel-card-field-primary {
    display: flex;
}

/* При наведении карточка раскрывается — показываем все поля. */
.planner-funnel-card:hover .planner-funnel-card-field {
    display: flex;
}

.planner-funnel-card:hover {
    border-color: var(--brand);
}

.planner-funnel-card-dragging {
    opacity: 0.5;
}

.planner-funnel-card-label {
    color: var(--text-secondary);
    flex: 0 0 auto;
    min-width: 68px;
}

.planner-funnel-card-value {
    color: var(--text);
    word-break: break-word;
}

/* Задача — главный текст карточки, чуть крупнее. */
.planner-funnel-card-field-title .planner-funnel-card-value {
    font-weight: 600;
    font-size: 13px;
}

/* Контейнер табличного вида: переиспользует .table-view-wrap / .table-view
   (static/css/table.css) — своей табличной раскладки не дублируем. */
.planner-table-view {
    margin-top: 4px;
}

.planner-table-wrap {
    max-height: 68vh;
}

.planner-table {
    width: 100%;
}

/* Заголовки-кнопки системных колонок: кликабельны для сортировки. */
.planner-table th.planner-table-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.planner-table th.planner-table-sortable:hover {
    color: var(--text);
}

.planner-table-sort-ind {
    margin-left: 4px;
    font-size: 10px;
}

.planner-table .planner-table-units {
    text-align: center;
}

.planner-table .planner-table-actions {
    white-space: nowrap;
}

.planner-table .planner-table-actions .btn {
    margin-right: 4px;
}

.planner-table-empty {
    display: none;
}

/* --- Планер: календарный вид задач (Конструктор задач, шаг 8 §7) --- */

.planner-calendar-view {
    margin-top: 4px;
}

.planner-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Переключатель периода «День | Неделя | Месяц | Год» — как переключатель вида. */
.planner-calendar-periods {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.planner-calendar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.planner-calendar-title {
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}

.planner-calendar-body {
    overflow-x: auto;
}

/* Месяц: 7 колонок, 6 строк; заголовок дней недели + сетка ячеек. */
.planner-calendar-grid {
    min-width: 640px;
}

.planner-calendar-grid-head,
.planner-calendar-grid-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.planner-calendar-grid-head-cell {
    padding: 4px 6px;
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    text-transform: uppercase;
}

.planner-calendar-cell {
    /* Все ячейки месяца — одинаковой увеличенной высоты (требование владельца
       2026-10-12): 84 → 143px (~+70%). «Сегодня» отличается только рамкой. */
    min-height: 143px;
    border: 1px solid var(--border);
    border-top: none;
    border-right: none;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planner-calendar-grid-cells .planner-calendar-cell:nth-child(7n) {
    border-right: 1px solid var(--border);
}

.planner-calendar-cell.is-out {
    background: var(--surface-hover);
    opacity: 0.55;
}

.planner-calendar-cell.is-today {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.planner-calendar-cell-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.planner-calendar-cell-num {
    font-weight: 600;
}

.planner-calendar-cell-count {
    background: var(--brand);
    color: #fff;
    border-radius: 10px;
    padding: 0 6px;
    font-size: 11px;
    line-height: 16px;
}

.planner-calendar-cell-chips {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

/* Неделя: 7 равных колонок. */
.planner-calendar-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    min-width: 640px;
}

.planner-calendar-week-col {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px;
    /* Фрейм дня недели — фиксированная высота (500), внутри — часовая сетка
       со скроллом. Так «сегодня» и остальные колонки выровнены по высоте. */
    height: 500px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.planner-calendar-week-col.is-today {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.planner-calendar-week-head {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-bottom: 2px;
    flex: 0 0 auto;
}

/* Часовая сетка колонки недели (08:00–20:00) — как в виде «День», уже окно. */
.planner-calendar-week-hours {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Строка-час: горизонтальная линия-разлиновка; минимальная высота строки. */
.planner-calendar-week-hour {
    flex: 1 0 auto;
    min-height: 22px;
    border-bottom: 1px solid var(--border);
    padding: 1px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Полосы задач вне окна часов: ранние/без времени — сверху, поздние — снизу. */
.planner-calendar-week-band {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.planner-calendar-week-band.is-top {
    border-bottom: 1px dashed var(--border);
}

.planner-calendar-week-band.is-bottom {
    border-top: 1px dashed var(--border);
}

/* Клик по дню (номер в месяце, шапка колонки в неделе) → режим «День».
   Общий класс: единый вид кликабельного дня в обоих видах. */
.planner-calendar-daylink {
    cursor: pointer;
    border-radius: 4px;
}

.planner-calendar-daylink:hover {
    background: var(--surface-hover);
    color: var(--brand);
}

.planner-calendar-cell-head.planner-calendar-daylink {
    padding: 2px 4px;
    margin: -2px -2px 2px;
}

/* День: сетка часовых строк 06:00–23:00 (18 строк), разлинованных по часам
   (вид планировщика). Часы 06:00–20:00 — светлые линии (--border),
   20:00–23:00 — фирменный красный (--planner-night-line). Высота строк
   адаптивна (--planner-hour-h), при нехватке места — внутренний скролл дня. */
.planner-calendar-day {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
}

/* Фолбэк-слот «В течение дня» (когда модуль дня не подключён): высота по
   содержимому, БЕЗ фиксированных 100px — вид «День» тянется по экрану. */
.planner-calendar-day-slot {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Строки «В течение дня» больше нет (переделка 2026-10-11): задачи стоят
   в строке своего часа по `due_date` (datetime). */

.planner-calendar-day-empty {
    color: var(--text-secondary);
    font-size: 13px;
}

/* Сетка часов: строки растягиваются по доступной высоте области дня
   (--planner-hour-h), но не выше вьюпорта — при нехватке места внутренний
   скролл, а не поломка сетки. Высота адаптивна, фиксированных 100px нет. */
.planner-calendar-day-grid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Минимальная высота строки-часа: строки заметно выше и тянутся выше при
       запасе места (межстрочный интервал 56px вместо прежних 36px). */
    --planner-hour-h: 56px;
}

/* Строка-час: подпись слева + область под задачи; разделены горизонтальной линией. */
.planner-calendar-day-row {
    flex: 1 1 auto;
    min-height: var(--planner-hour-h);
    padding: 6px 0;
    display: flex;
    align-items: stretch;
    gap: 8px;
    border-top: 1px solid var(--border);
}

.planner-calendar-day-row:last-child {
    border-bottom: 1px solid var(--border);
}

/* Ночь/вечер (20:00–08:00) — фирменный красный, линия снизу рядa. */
.planner-calendar-day-row.is-night {
    border-top-color: var(--planner-night-line);
}

.planner-calendar-day-row.is-night:last-child {
    border-bottom-color: var(--planner-night-line);
}

/* Подпись часа: читается и на светлой, и на красной линии. */
.planner-calendar-day-hour {
    flex: 0 0 64px;
    padding: 2px 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Область строки под будущие задачи часа (chips — следующий кирпичик). */
.planner-calendar-day-slot-cell {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
}

/* Кусочек задачи в ячейке: кликабелен (открывает форму). */
.planner-calendar-chip {
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface, transparent);
    color: var(--text);
    text-align: left;
    padding: 2px 6px;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planner-calendar-chip:hover {
    background: var(--surface-hover);
}

.planner-calendar-chip[ draggable="true" ] {
    cursor: grab;
}

.planner-calendar-chip-dragging {
    opacity: 0.5;
}

/* Юнит «Приоритет»: цвет показывается БОРДЮРОМ (фон обычный) — переделка
   2026-10-12: заливка перекрывала текст. Уровень уходит в tasks.priority. */
.planner-calendar-chip-priority-high {
    border: 2px solid #c9302c;
}

.planner-calendar-chip-priority-medium {
    border: 2px solid #e0a021;
}

.planner-calendar-chip-priority-low {
    border: 2px solid #449d44;
}

/* Юнит «Приоритет» на схеме редактора: цветной бордюр, фон обычный (не
   перекрывает текст узла). */
.planner-canvas-node-priority-high {
    border-color: #c9302c;
    border-width: 2px;
}

.planner-canvas-node-priority-medium {
    border-color: #e0a021;
    border-width: 2px;
}

.planner-canvas-node-priority-low {
    border-color: #449d44;
    border-width: 2px;
}

/* Юнит «Приоритет»: в таблице окрашивается ТОЛЬКО ячейка действий — цветной
   бордюр слева (строка не заливается, текст читается). */
.planner-table .planner-table-actions.planner-table-priority-high {
    border-left: 4px solid #c9302c;
}

.planner-table .planner-table-actions.planner-table-priority-medium {
    border-left: 4px solid #e0a021;
}

.planner-table .planner-table-actions.planner-table-priority-low {
    border-left: 4px solid #449d44;
}

/* Зеркало дедлайна задачи на дату дедлайна (юнит «Дедлайн»). */
.planner-calendar-chip-deadline {
    border-left: 3px solid var(--brand);
    font-style: italic;
    opacity: 0.92;
}

/* Зона приёма drag: подсветка цели. */
.planner-calendar-drop {
    background: var(--surface-hover);
    outline: 2px dashed var(--brand);
    outline-offset: -2px;
}

/* Год: 12 карточек-месяцев со счётчиками; клик → месяц. */
.planner-calendar-year {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.planner-calendar-year-cell {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
}

.planner-calendar-year-cell:hover {
    background: var(--surface-hover);
    border-color: var(--accent, #4a90d9);
}

.planner-calendar-year-name {
    font-weight: 600;
}

.planner-calendar-year-count {
    color: var(--text-secondary);
    font-size: 12px;
    margin-top: 4px;
}

/* Задачи без срока — отдельная зона, чтобы не терялись. */
.planner-calendar-undated {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.planner-calendar-undated-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.planner-calendar-undated-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.planner-calendar-undated-item {
    max-width: 240px;
}

/* ============================================================
   Конструктор задачи: редактор-канвас (шаг 9 §6/§8).
   Палитра + поле (узлы/связи) + панель настроек узла.
   ============================================================ */

.planner-canvas-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.planner-canvas-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.planner-canvas-root {
    color: var(--text-secondary);
    font-size: 13px;
}

.planner-canvas-status {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

.planner-canvas-status.error {
    color: #e06c5a;
}

.planner-canvas-layout {
    display: grid;
    grid-template-columns: 180px 1fr 250px;
    gap: 10px;
    align-items: start;
    min-height: 420px;
}

/* Палитра юнитов — группы по смыслу (§3.2). */
.planner-canvas-palette {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    background: var(--surface);
}

.planner-canvas-group-title {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.planner-canvas-palette .planner-canvas-kind {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    text-align: left;
    cursor: grab;
}

.planner-canvas-kind.is-unavailable,
.planner-canvas-kind[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Поле конструктора: узлы абсолютными координатами + SVG-связи. */
.planner-canvas-field {
    position: relative;
    overflow: auto;
    min-height: 420px;
    max-height: 70vh;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background:
        repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255, 255, 255, 0.03) 20px),
        repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255, 255, 255, 0.03) 20px);
    background-color: var(--bg);
}

.planner-canvas-field.planner-canvas-drop {
    outline: 2px dashed var(--brand);
    outline-offset: -4px;
}

.planner-canvas-nodes {
    position: relative;
    min-width: 600px;
    min-height: 400px;
}

/* SVG-слой линий связи «объект → событие» (только UI, переделка 2026-10-11):
   накладывается под узлами (z-index 0), не перехватывает клики. */
.planner-canvas-links {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

/* Все линии связи — ЗЕЛЁНЫЕ (переделка 2026-10-12-b): единая связка
   «объект → событие → ответственный» одного цвета. */
.planner-canvas-link {
    stroke: #3fb950;
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

/* Линия «событие → ответственный» — тот же зелёный, длиннее штрих. */
.planner-canvas-link-person {
    stroke: #3fb950;
    stroke-dasharray: 6 3;
}


/* Узел. Увеличенная форма (переделка 2026-10-11): вмещает название типа и
   значение выбранного параметра (напр. «Объект: <название>») без обрезки. */
.planner-canvas-node {
    position: absolute;
    width: 240px;
    min-height: 84px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: grab;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1;  /* над SVG-слоем линий связи (.planner-canvas-links) */
}

/* Компактная форма узла (переделка 2026-10-12): юниты «Приоритет» и «Дедлайн» —
   вдвое меньше по ширине и высоте (одна короткая строка значения, без обрезки). */
.planner-canvas-node-compact {
    width: 120px;
    min-height: 42px;
    padding: 4px 6px;
    gap: 1px;
}

.planner-canvas-node-compact .planner-canvas-node-kind {
    font-size: 9px;
}

.planner-canvas-node-compact .planner-canvas-node-name {
    font-size: 11px;
    -webkit-line-clamp: 1;
}

/* Группа «Состояние» (приоритет/дедлайн): якорь к правому верхнему углу поля —
   позиция не «случайная», а фиксированная по краю (переделка 2026-10-12).
   JS пишет только top; правый край задаёт CSS, поэтому узел не «уезжает» при
   изменении ширины поля/скроллбара. */
.planner-canvas-node-tr {
    left: auto !important;
    right: 12px;
}

.planner-canvas-node-dragging {
    opacity: 0.6;
}

.planner-canvas-node.is-selected {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand);
}

/* Корневой юнит визуально выделен (§5: от него пересчитываются кандидаты). */
.planner-canvas-node.is-root {
    border-color: var(--accent);
    background: rgba(255, 214, 102, 0.08);
}

/* Связанные юниты (участники любой линии связи) — зеленоватый ПРОЗРАЧНЫЙ фон
   (переделка 2026-10-12-b). Стоит ПОСЛЕ .is-root/.is-selected, чтобы зелёный
   фон выигрывал у статусных фонов. Рамку связи НЕ трогаем: цвет рамки
   принадлежит статусам узла (is-root — жёлтая, is-responsible — accent,
   is-selected — брендовая) — иначе цвета рамок конфликтуют. */
.planner-canvas-node.is-linked {
    background: rgba(63, 185, 80, 0.12);
}

.planner-canvas-node-kind {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.planner-canvas-node-name {
    font-size: 13px;
    /* Название типа + значение — до 2 строк; дальше обрезка многоточием
       (полное значение всегда видно в инспекторе). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Реквизиты задачи в едином редакторе (переделка 2026-10-10). */
.planner-canvas-req {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.planner-canvas-req .form-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.planner-canvas-req .form-group {
    flex: 1 1 160px;
    min-width: 0;
}

/* Статус сохранения — в шапке редактора. */
.screen > .sidebar-header .planner-canvas-status {
    margin-left: auto;
}

.planner-canvas-ref-select,
.planner-canvas-ref-manual {
    width: 100%;
}

.planner-canvas-ref-manual {
    margin-top: 4px;
    box-sizing: border-box;
}

.planner-canvas-node-action {
    font-size: 10px;
    color: var(--brand);
    margin-top: 2px;
}

/* Статус «Ответственный» на узле-сотруднике (переделка 2026-10-11). */
.planner-canvas-node-responsible {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    margin-top: 2px;
}

.planner-canvas-node.is-responsible {
    border-color: var(--accent);
}

/* Подменю «Выбрать событие» в контекстном меню узла (переделка 2026-10-11). */
.context-menu-submenu {
    position: relative;
}

.context-menu-submenu-panel {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    border-left: 1px solid var(--border);
    padding-left: 4px;
}

/* Атрибут hidden обязан скрывать панель подменю. Правило `.context-menu-item`
   ([context-menu.css]) и `display: flex` выше перебивают UA-правило
   `[hidden] { display: none }` при равной специфичности — из-за этого подменю
   «Выбрать событие»/«Приоритет» всегда были раскрыты (баг 2026-10-12). Тот же
   приём, что для пунктов меню (кейс H2, 2026-09-13). */
.context-menu .context-menu-submenu-panel[hidden] {
    display: none;
}

.context-menu-item-has-submenu {
    width: 100%;
    text-align: left;
}

.planner-canvas-sent {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.planner-canvas-date-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.planner-canvas-date-row .form-group {
    flex: 1 1 120px;
}

.planner-canvas-who {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.planner-canvas-weekdays {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.planner-canvas-weekdays label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
}

/* Панель настроек блока. */
.planner-canvas-settings {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px;
    background: var(--surface);
}

.planner-canvas-settings-head {
    font-weight: 600;
    margin-bottom: 8px;
}

.planner-canvas-settings-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.planner-canvas-hint {
    color: var(--text-secondary);
    font-size: 12px;
}

.planner-canvas-warn {
    color: #e0b05a;
    font-size: 12px;
    margin: 0;
}

/* Менеджер (просмотр): перетаскивание и панель редактирования отключены. */
body.crm-readonly .planner-canvas-node {
    cursor: default;
}

/* --- Слепок задачи (переделка 2026-10-12) — read-only «задание» из JSON --- */
.planner-snapshot-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
}

.planner-snapshot-head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.planner-snapshot-head-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.planner-snapshot-number {
    font-size: 12px;
    color: var(--text-secondary);
}

.planner-snapshot-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--surface-2, #2a2f3a);
}

.planner-snapshot-badge-done { background: #2e5c3f; }
.planner-snapshot-badge-in_work { background: #2f4d6e; }
.planner-snapshot-badge-waiting { background: #6e5a2f; }

.planner-snapshot-title-text {
    font-size: 16px;
    font-weight: 600;
    margin-top: 6px;
}

.planner-snapshot-field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    margin-top: 4px;
}

.planner-snapshot-field-label {
    color: var(--text-secondary);
    min-width: 96px;
}

.planner-snapshot-field-value.planner-snapshot-description {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Кнопка «Автоописание» у поля описания в редакторе задачи. */
.planner-canvas-describe {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 12px;
    border: 1px solid var(--border, #d0d7de);
    border-radius: 4px;
    background: var(--bg-secondary, #f6f8fa);
    color: var(--text-secondary);
    cursor: pointer;
}

.planner-canvas-describe:hover {
    color: var(--text-primary);
    border-color: var(--accent, #2f81f7);
}

.planner-snapshot-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: snapshot-block;
}

.planner-snapshot-block {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    counter-increment: snapshot-block;
}

.planner-snapshot-block::before {
    content: counter(snapshot-block) ".";
    color: var(--text-secondary);
    font-size: 12px;
    min-width: 18px;
}

.planner-snapshot-block-kind {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.planner-snapshot-block-text {
    font-size: 13px;
}

.planner-snapshot-block-root,
.planner-snapshot-block-resp {
    font-size: 11px;
    color: var(--text-secondary);
}

.planner-snapshot-block-flag {
    font-size: 11px;
    color: #e0b05a;
}

.planner-snapshot-link {
    font-size: 12px;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    background: transparent;
    color: var(--text-primary, inherit);
    cursor: pointer;
}

.planner-snapshot-link:hover {
    border-color: var(--accent, #4a90d9);
}

.planner-snapshot-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ПКМ-меню задачи в представлениях (воронка/таблица/календарь). */
.planner-task-menu {
    position: fixed;
    z-index: 1200;
}

@media (max-width: 1100px) {
    .planner-canvas-layout {
        grid-template-columns: 1fr;
    }
}

/* --- Файловое хранилище: раздел «Документы» (план file-storage-design.md,
   D-031) и вкладка «Документы» карточки объекта. Стили на токенах crm.css. --- */
.documents-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Единая высота контролов панели: селект спейса, кнопки и поиск стоят
   в одну линию, без «разъезжания». Раньше высоту задавали только padding/
   шрифт — у <select>, <button> и <input type="search"> она по умолчанию
   разная (34 / 38 / 23 px), и строка выглядела криво. */
.documents-toolbar .documents-space-select,
.documents-toolbar .documents-search {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1.2;
}

.documents-toolbar .btn {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1.2;
}

.documents-space-select {
    flex: 1 1 200px;
    min-width: 160px;
}

.documents-search {
    flex: 1 1 200px;
    min-width: 160px;
}

/* Раскладка «проводник»: слева дерево папок, справа содержимое. */
.documents-layout {
    display: grid;
    grid-template-columns: minmax(160px, 240px) 1fr;
    gap: 12px;
    align-items: start;
    min-height: 0;
}

.documents-tree-panel {
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 4px;
    background: var(--surface-3, #1f1f1f);
    padding: 6px;
    max-height: 70vh;
    overflow: auto;
}

.documents-tree {
    font-size: 13px;
}

.documents-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text, #ffffff);
    white-space: nowrap;
}

.documents-tree-row:hover {
    background: var(--surface-hover, #2b2b2b);
}

.documents-tree-row.is-active {
    background: var(--surface-2, #2b2b2b);
    color: var(--brand, #aa9974);
}

.documents-tree-row.documents-tree-drop {
    outline: 1px dashed var(--brand, #aa9974);
    background: var(--surface-hover, #2b2b2b);
}

.documents-tree-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary, #949494);
    cursor: pointer;
}

.documents-tree-toggle.is-open svg {
    transform: rotate(90deg);
}

.documents-tree-toggle.is-leaf {
    visibility: hidden;
    cursor: default;
}

.documents-tree-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--brand, #aa9974);
}

/* Размер иконок-папок задаётся здесь (в SVG остаётся только viewBox) —
   иначе браузер мог обрезать иконку (дефект 2026-10-13). */
.documents-tree-icon svg {
    display: block;
    width: 16px;
    height: 16px;
}

.documents-tree-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Содержимое папки — фиксированные 80% ширины кадра (просьба владельца
   2026-10-13: прежняя адаптивная ширина оставляла пустое поле справа — ПКМ
   по нему уходил в системное меню браузера). */
.documents-content {
    min-width: 0;
    width: 80%;
}

.documents-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    font-size: 13px;
}

.documents-crumb {
    color: var(--brand, #aa9974);
    text-decoration: none;
}

.documents-crumb:hover {
    text-decoration: underline;
}

.documents-crumb-sep {
    color: var(--text-secondary, #949494);
}

/* Содержимое папки — сетка плиток (как в проводнике Windows). */
.documents-list {
    list-style: none;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 4px;
    background: var(--surface-3, #1f1f1f);
    min-height: 120px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    align-content: start;
}

.documents-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    text-align: center;
    overflow: hidden;
}

.documents-tile:hover {
    background: var(--surface-hover, #2b2b2b);
}

.documents-tile:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(170, 153, 116, 0.25));
}

.documents-tile.is-selected {
    background: var(--surface-2, #2b2b2b);
    border-color: var(--brand, #aa9974);
}

.documents-tile.is-cut {
    opacity: 0.5;
}

.documents-tile.is-dragging {
    opacity: 0.4;
}

.documents-tile.documents-tile-drop {
    background: var(--surface-2, #2b2b2b);
    border-color: var(--brand, #aa9974);
}

.documents-tile-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary, #949494);
}

.documents-tile-icon svg {
    display: block;
    width: 40px;
    height: 40px;
}

.documents-tile--folder .documents-tile-icon {
    color: var(--brand, #aa9974);
}

/* Имя — читаемый цвет темы (дефект 2026-10-13: фолбэк #222 был невидим). */
.documents-tile-name {
    max-width: 100%;
    color: var(--text, #ffffff);
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.documents-tile-meta {
    color: var(--text-secondary, #949494);
    font-size: 11px;
}

.documents-progress {
    padding: 4px 0;
    font-size: 12px;
    color: var(--text-secondary, #949494);
}

/* Строка состояния/ошибки раздела — в самом низу фрейма (вне .sidebar-body).
   Ошибка — заметная, не автоскрывается. */
.documents-status {
    margin: 8px 16px 12px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    background: var(--surface-2, #2b2b2b);
    color: var(--text-muted, #cfcfcf);
}

.documents-status[hidden] {
    display: none;
}

.documents-status--error {
    background: rgba(224, 85, 69, 0.18);
    color: var(--danger-text, #ff6b6b);
}

.documents-status--ok {
    background: rgba(61, 220, 132, 0.14);
    color: var(--success, #3ddc84);
}

.documents-dialog {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.documents-dialog[hidden] {
    display: none;
}

.documents-dialog-box {
    background: var(--surface, #222222);
    color: var(--text, #ffffff);
    border: 1px solid var(--border, #3a3a3a);
    border-radius: 8px;
    padding: 16px;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-popup, 0 8px 30px rgba(0, 0, 0, 0.6));
}

.documents-dialog-title {
    font-weight: 600;
    margin-bottom: 8px;
}

.documents-dialog-text {
    margin-bottom: 12px;
}

.documents-dialog-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary, #949494);
    margin-bottom: 4px;
}

.documents-dialog-input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--border, #3a3a3a);
    background: var(--surface-3, #1f1f1f);
    color: var(--text, #ffffff);
}

.documents-dialog-input[hidden] {
    display: none;
}

.documents-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* --- Управление дисками (модалка оператора) --- */
.documents-spaces-box {
    width: 560px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
}

.spaces-manage-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.spaces-manage-form .documents-dialog-input {
    flex: 1 1 40%;
    margin-bottom: 0;
    min-width: 140px;
}

.spaces-manage-list,
.spaces-shares-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.spaces-manage-list {
    max-height: 40vh;
    overflow-y: auto;
    border-top: 1px solid var(--border, #3a3a3a);
}

.spaces-manage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border, #3a3a3a);
}

.spaces-manage-info {
    flex: 1 1 auto;
    min-width: 0;
}

.spaces-manage-item-name {
    color: var(--text, #ffffff);
}

.spaces-manage-item-kind {
    font-size: 12px;
    color: var(--text-secondary, #949494);
    margin-left: 6px;
}

.spaces-manage-item-desc {
    display: block;
    font-size: 12px;
    color: var(--text-secondary, #949494);
}

.spaces-manage-item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.spaces-shares-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border, #3a3a3a);
}

.spaces-shares-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--brand, #aa9974);
}

.spaces-shares-list {
    margin-bottom: 10px;
}

.spaces-shares-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border, #3a3a3a);
}

.spaces-shares-subject {
    flex: 1 1 auto;
    min-width: 0;
}

.spaces-shares-access {
    font-size: 12px;
    color: var(--text-secondary, #949494);
}

.spaces-shares-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.spaces-shares-form .documents-dialog-input {
    flex: 1 1 30%;
    margin-bottom: 0;
    min-width: 120px;
}

.spaces-shares-empty {
    color: var(--text-secondary, #949494);
    font-size: 13px;
}

.object-card-documents {
    list-style: none;
    margin: 0;
    padding: 0;
}