/* Нативная панель БД карт (пилот radix2D, флаг ?chartsdb=native).
   Только светлый DOM, без Shadow DOM. Тёмная тема — через color-scheme. */
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) {
    border: 1px solid rgb(190, 190, 190);
    padding: 4px;
    max-width: 600px;
    box-sizing: border-box;
    text-align: left;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-layout {
    display: flex;
    gap: 6px;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-folders {
    width: 30%;
    min-width: 130px;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-charts {
    width: 70%;
}
/* Компактный тулбар: две выпадашки в одну строку во всю ширину. */
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-toolbar {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-toolbar select {
    flex: 1 1 0;
    min-width: 0;
    font-size: small;
    max-width: 50%;
}
/* Тулбары «📁 Папки… / ⭐ Карты…» всегда видимы: это панель работы
   с папками и картами (устройство, облако, кабинет). Рядом — строка
   поиска по имени/городу (только поиск, без дублирующей кнопки). */
/* Панель поиска: flex-строка, поле ввода тянется на всю доступную ширину. */
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared, .cdb-src-box) .cdb-searchbar {
    display: flex;
    gap: 6px;
    align-items: center;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared, .cdb-src-box) .cdb-searchbar .cdb-search {
    flex: 1 1 auto;
    min-width: 0;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-folder-name {
    font-size: small;
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-folders nav {
    max-height: 220px;
    overflow: auto;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) ul.cdb-tree {
    list-style: none;
    padding-left: calc(var(--cdb-depth, 0) * 12px);
    margin: 0;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) button.cdb-fold {
    font-size: small;
    font-family: monospace;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 3px;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) button.cdb-fold:hover {
    border-color: rgb(190, 190, 190);
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-active {
    background: lightblue;
    font-weight: bold;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) table {
    width: 100%;
    font-size: small;
    display: block;
    max-height: 220px;
    overflow: auto;
    border-spacing: 0;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) thead th {
    position: sticky;
    top: 0;
    background: #e0e0e0;
    z-index: 1;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) td, :is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) th {
    border: 1px solid #fff;
    padding: 1px 3px;
    white-space: nowrap;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) tbody tr {
    cursor: pointer;
}
:is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-empty {
    text-align: center;
    color: #888;
}
dialog.cdb-dialog, :is(#chartEditor, #chartEditorLocal, #chartEditorCloud) {
    border: 1px solid rgb(190, 190, 190);
    border-radius: 8px;
    padding: 12px;
    /* Широкий диалог, чтобы геокарта занимала почти всю ширину страницы. */
    width: min(760px, 96vw);
    max-width: 96vw;
    box-sizing: border-box;
    /* Вертикальная промотка, если форма не помещается по высоте.
       Описание — самое нижнее поле, кнопки липнут к низу диалога. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
}
/* Форма редактора карты: единая сетка, аккуратные поля.
   text-align сброшен явно — страница центрирует всё через .center. */
.cdb-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: min(380px, 84vw);
    text-align: left;
}
.cdb-form h3 {
    margin: 0 0 2px;
    font-size: 17px;
}
/* Все строки формы — одинаковая сетка: подпись справа в левой колонке,
   поле ввода — в правой на всю ширину. Текстовый узел подписи и поле
   внутри <label> сами ложатся в две колонки. */
.cdb-form label {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    gap: 0;
    margin: 0;
    font-size: 13px;
    text-align: right;
}
.cdb-form input, .cdb-form select, .cdb-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 7px 9px;
    font-size: 14px;
    text-align: left;
    border: 1px solid #b9b9c4;
    border-radius: 7px;
    background: Field;
    color: FieldText;
}
.cdb-form input:focus, .cdb-form select:focus, .cdb-form textarea:focus {
    outline: none;
    border-color: #8900FF;
    box-shadow: 0 0 0 2px rgba(137, 0, 255, 0.25);
}
.cdb-form input:invalid {
    background-color: lightpink;
}
.cdb-form .cdb-city {
    min-width: 0;
}
.cdb-form cities-autocomplete {
    display: block;
    width: 100%;
}
/* Раскрывалка карты: кликабельный заголовок во всю ширину. */
.cdb-form .cdb-mapbox {
    margin: 0;
}
.cdb-form .cdb-mapbox > summary {
    cursor: pointer;
    font-size: 13px;
    padding: 4px 0;
}
/* На узких экранах подпись над полем. */
@media (max-width: 480px) {
    .cdb-form label {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
        text-align: left;
    }
}
/* Описание — на всю ширину диалога. */
.cdb-form .cdb-descr-label textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    resize: vertical;
}
.cdb-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
    position: sticky;
    bottom: 0;
    background: Canvas;
    padding: 8px 0 2px;
}
.cdb-form-actions button {
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #b9b9c4;
    background: ButtonFace;
    color: ButtonText;
    cursor: pointer;
}
.cdb-form-actions .cdb-primary {
    font-weight: bold;
    background: #8900FF;
    border-color: #8900FF;
    color: #fff;
}
/* Геокарта на всю ширину диалога (а он — почти на всю ширину страницы). */
:is(#chartEditor, #chartEditorLocal, #chartEditorCloud) .cdb-mapbox {
    width: 100%;
    box-sizing: border-box;
}
:is(#chartEditor, #chartEditorLocal, #chartEditorCloud) .cdb-map {
    width: 100%;
    min-height: 180px;
}
:is(#chartEditor, #chartEditorLocal, #chartEditorCloud) geo-map {
    display: block;
    width: 100%;
}
@media (max-width: 480px) {
    :is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-layout {
        flex-direction: column;
    }
    :is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-folders, :is(#chartsDbNative, #chartsDbLocal, #chartsDbCloud, #chartsDbShared) .cdb-charts {
        width: 100%;
    }
}