/*─────────────────── контент-менеджер (ts_content.ts) ───────────────────
  Окно почти во всё окно: слева список страниц объекта, справа редактор.
  ---------------------------------------------------------------------- */

.overlay .modal.center.content_manager_modal {
    position: relative;
    width: min(1600px, 97vw);
    /* 90% высоты окна, но не выше 1100px */
    height: min(90vh, 1100px);
    /* сбрасываем глобальное .center { max-height: 60% } из basic_elem.css */
    max-height: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    margin: auto;
    overflow: hidden;
    text-align: left;
}

/* ── шапка ── */
.content_manager_modal .cm_head {
    padding: 14px 56px 10px 18px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

    .content_manager_modal .cm_head .cm_title {
        width: auto;
        margin: 0 0 4px;
        text-align: left;
        font-size: 15px;
        color: var(--fore-color);
    }

    .content_manager_modal .cm_head .cm_hint {
        display: block;
        font-size: 12px;
        opacity: 0.65;
        line-height: 1.35;
    }

/* ── тело ── */
.content_manager_modal .cm_body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 10px 14px;
}

/* ── список страниц ── */
.content_manager_modal .cm_side {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

    .content_manager_modal .cm_side .cm_add {
        width: 100%;
        box-sizing: border-box;
    }

    /* раздел: выбор раздела (дерево групп) + порядок страниц внутри раздела */
    .content_manager_modal .cm_group_bar {
        display: flex;
        gap: 6px;
        align-items: center;
    }

        .content_manager_modal .cm_group_bar .cm_group_filter {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }

        .content_manager_modal .cm_group_bar .cm_group_reset {
            flex: 0 0 auto;
            width: 26px;
            height: 24px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
        }

    /* раздел в редакторе страницы */
    .content_manager_modal .cm_group_row {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .content_manager_modal .cm_group_value {
        font-size: 13px;
    }

    /* поиск по наименованию + фильтр по типу */
    .content_manager_modal .cm_search {        display: flex;
        gap: 6px;
        align-items: center;
    }

        .content_manager_modal .cm_search .cm_find {
            flex: 1 1 auto;
            min-width: 0;
            box-sizing: border-box;
            height: 28px;
            padding: 0 8px;
            background-color: var(--input-bg);
            border: 1px solid var(--input-border);
            border-radius: 6px;
            color: var(--fore-color);
        }

            .content_manager_modal .cm_search .cm_find:focus {
                outline: none;
                border-color: var(--input-focus-border);
                box-shadow: var(--input-focus-ring);
            }

        .content_manager_modal .cm_search .cm_filter_type {
            flex: 0 0 150px;
        }

    .content_manager_modal .cm_list {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .content_manager_modal .cm_row {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 8px 10px;
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            border-radius: 8px;
            background: var(--surface-card);
            cursor: pointer;
        }

            .content_manager_modal .cm_row:hover {
                background: var(--surface-hover);
            }

            .content_manager_modal .cm_row.active {
                border-color: var(--theme-color-1);
            }

        .content_manager_modal .cm_row_name {
            font-weight: 600;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .content_manager_modal .cm_row_meta {
            font-size: 11px;
            opacity: 0.6;
        }

/* ── редактор ── */
.content_manager_modal .cm_editor {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .content_manager_modal .cm_page,
    .content_manager_modal .cm_refs {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .content_manager_modal .cm_items {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .content_manager_modal .cm_add_row {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .content_manager_modal .cm_item {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 8px;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        border-radius: 8px;
        background: var(--surface-card);
    }

    .content_manager_modal .cm_item_top {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* тело элемента: скрывается кнопкой «свернуть» */
    .content_manager_modal .cm_item_body {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

        .content_manager_modal .cm_item_body.collapsed {
            display: none;
        }

    .content_manager_modal .cm_item_num {
        min-width: 20px;
        text-align: right;
        opacity: 0.6;
        font-variant-numeric: tabular-nums;
    }

    .content_manager_modal .cm_item_moves {
        margin-left: auto;
        display: flex;
        gap: 4px;
    }

        .content_manager_modal .cm_item_moves .button {
            width: 24px;
            height: 22px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            line-height: 1;
        }

    .content_manager_modal .cm_item .cm_value {
        min-height: 60px;
        resize: vertical;
        width: 100%;
        box-sizing: border-box;
    }

    .content_manager_modal .cm_item .cm_style {
        width: 100%;
        box-sizing: border-box;
    }

    /* кнопка сворачивания: не должна сливаться со стрелками перемещения */
    .content_manager_modal .cm_item_moves .button.cm_item_collapse {
        width: 24px;
        height: 22px;
        font-size: 15px;
        font-weight: 700;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.18));
        border-radius: 6px;
        opacity: 0.85;
        margin-right: 10px;
    }

        .content_manager_modal .cm_item_moves .button.cm_item_collapse:hover {
            opacity: 1;
            border-color: var(--theme-color-1);
            color: var(--theme-color-1);
        }

    /* фото элемента: превью + выбор файла из медиа */
    .content_manager_modal .cm_photo {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .content_manager_modal .cm_photo .cm_photo_img {
        max-width: 260px;
        max-height: 160px;
        border-radius: 8px;
        border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
        object-fit: contain;
        background: rgba(0, 0, 0, 0.2);
    }

    .content_manager_modal .cm_photo .cm_photo_missing {
        font-size: 12px;
        opacity: 0.6;
    }

    .content_manager_modal .cm_photo .cm_photo_pick {
        padding: 2px 10px;
        font-size: 12px;
    }

    .content_manager_modal .cm_refs .cm_ref {
        font-size: 12px;
        opacity: 0.8;
    }

    /* связи: список + кнопки выбора */
    .content_manager_modal .cm_refs_list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .content_manager_modal .cm_ref_row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .content_manager_modal .cm_ref_name {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content_manager_modal .cm_ref_row .cm_remove {
        margin-left: auto;
        width: 24px;
        height: 22px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        line-height: 1;
    }

/* ── подвал ── */
.content_manager_modal .cm_footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

    .content_manager_modal .cm_footer .cm_error {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        color: var(--color-red);
    }

    .content_manager_modal .cm_footer .cm_delete {
        color: var(--color-red);
    }

    .content_manager_modal .cm_footer .button {
        flex: 0 0 auto;
    }

.content_manager_modal .cm_empty {
    padding: 8px;
    font-size: 12px;
    opacity: 0.6;
}