/* Карта СНТ Аникино — раскладка по координатам.
   Каждый участок стоит на своём месте абсолютно и ни от кого не зависит:
   расширение одного не двигает соседей, наложения невозможны. */

:root {
    --cpm-bg:        #eef1ec;   /* фон карты */
    --cpm-plot:      #ffffff;   /* участок */
    --cpm-line:      #c2cbc0;   /* границы участков */
    --cpm-road:      #dfe3dc;   /* дороги и проезды */
    --cpm-road-text: #5d6a5c;
    --cpm-ink:       #2c352b;   /* основной текст */
    --cpm-muted:     #6b756a;
    --cpm-badge:     #eaeee8;   /* метки Э / НСч */
    --cpm-badge-ink: #55604f;
    --cpm-debt:      #fbe9e9;   /* метка долга */
    --cpm-debt-ink:  #a83a3a;
    --cpm-merge:     #3f6d95;   /* объединённые участки */
    --cpm-accent:    #4a7a4e;   /* выделение при поиске */

    --cpm-title: 12px;
    --cpm-badge-size: 9px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--cpm-bg);
    color: var(--cpm-ink);
    font: 14px/1.4 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* ---------- панель ---------- */

.cpm-bar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--cpm-line);
    backdrop-filter: blur(6px);
}

.cpm-bar h1 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    white-space: nowrap;
}

.cpm-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cpm-bar label {
    font-size: 12px;
    color: var(--cpm-muted);
}

.cpm-bar input[type="search"] {
    width: 130px;
    padding: 4px 8px;
    font: inherit;
    font-size: 13px;
    color: var(--cpm-ink);
    background: #fff;
    border: 1px solid var(--cpm-line);
    border-radius: 4px;
}

.cpm-bar input[type="search"]:focus {
    outline: 2px solid var(--cpm-accent);
    outline-offset: -1px;
}

.cpm-btn {
    min-width: 30px;
    padding: 4px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--cpm-ink);
    background: #fff;
    border: 1px solid var(--cpm-line);
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
}

.cpm-btn:hover { background: #f4f6f3; }
.cpm-btn:active { background: #e9ede8; }
.cpm-btn:focus-visible { outline: 2px solid var(--cpm-accent); outline-offset: 1px; }

.cpm-zoom-val {
    min-width: 42px;
    font-size: 12px;
    color: var(--cpm-muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cpm-hint {
    margin-left: auto;
    font-size: 12px;
    color: var(--cpm-muted);
    white-space: nowrap;
}

.cpm-hint b {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 2px;
    font-weight: 500;
    background: var(--cpm-badge);
    color: var(--cpm-badge-ink);
    border-radius: 3px;
}

.cpm-hint .cpm-hint-debt {
    background: var(--cpm-debt);
    color: var(--cpm-debt-ink);
}

/* ---------- полотно ---------- */

.cpm-scroll {
    position: relative;
    /* полоса прокрутки зарезервирована всегда: иначе её появление меняет
       ширину контейнера уже после расчёта клетки, и карта не совпадает с окном */
    overflow-x: auto;
    overflow-y: scroll;
    height: calc(100vh - 39px);
    padding: 14px;
}

.cpm-canvas {
    position: relative;
    transform-origin: 0 0;
}

/* ---------- участок ---------- */

.cpm-plot,
.cpm-road {
    position: absolute;
    overflow: hidden;
}

.cpm-plot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 2px;
    background: var(--cpm-plot);
    border: 1px solid var(--cpm-line);
}

.cpm-plot[data-id] { cursor: pointer; }
.cpm-plot[data-id]:hover { background: #f7faf6; border-color: #97a795; }

/* гостям карточка участка не открывается — участки не выглядят кликабельными */
.cpm-guest .cpm-plot[data-id] { cursor: default; }
.cpm-guest .cpm-plot[data-id]:hover { background: var(--cpm-plot); border-color: var(--cpm-line); }
.cpm-guest .cpm-plot.is-merged[data-id]:hover { background: #e9f1f8; border-color: #d5e0ea; }

.cpm-title {
    display: block;
    font-size: var(--cpm-title);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: var(--cpm-ink);
}

.cpm-badges {
    display: flex;
    gap: 1px;
}

.cpm-badge {
    flex: 1 1 0;
    min-width: 0;
    padding: 1px 2px;
    font-size: var(--cpm-badge-size);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    background: var(--cpm-badge);
    color: var(--cpm-badge-ink);
    border-radius: 2px;
}

.cpm-debt {
    display: block;
    padding: 1px 2px;
    font-size: var(--cpm-badge-size);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    background: var(--cpm-debt);
    color: var(--cpm-debt-ink);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
}

/* низкий участок: содержимое ужато, чтобы три строки поместились */
.cpm-plot.cpm-tight { gap: 0; padding: 1px 2px; }
.cpm-plot.cpm-tight .cpm-title { font-size: calc(var(--cpm-title, 12px) * 0.82); }
.cpm-plot.cpm-tight .cpm-badge,
.cpm-plot.cpm-tight .cpm-debt { font-size: calc(var(--cpm-badge-size, 9px) * 0.82); padding: 0 2px; }

/* подпись объекта без номера: спорт-зона, мусорная площадка */
.cpm-label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    padding: 2px;
    font-size: var(--cpm-badge-size);
    line-height: 1.3;
    text-align: center;
    color: var(--cpm-muted);
}

.cpm-label strong { font-weight: 600; color: var(--cpm-ink); }

/* ---------- дороги ---------- */

.cpm-road {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--cpm-road);
    color: var(--cpm-road-text);
    font-size: var(--cpm-badge-size);
    white-space: nowrap;
}

.cpm-road:empty { padding: 0; }

/* ---------- объединённые участки ---------- */

/* участки одного владельца выделены общей заливкой, а по внешнему краю группы
   проходит сплошной контур — внутренних цветных рамок при этом нет */
.cpm-plot.is-merged {
    background: #e9f1f8;
    /* внутри группы разделитель едва заметен: снаружи её очерчивает контур */
    border-color: #d5e0ea;
}

.cpm-plot.is-merged:hover { background: #dfeaf4; }

.cpm-outline {
    position: absolute;
    z-index: 4;
    background: var(--cpm-merge);
    pointer-events: none;
}

/* ---------- поиск ---------- */

.cpm-plot.is-found {
    background: #e8f3e6;
    border-color: var(--cpm-accent);
    box-shadow: 0 0 0 3px rgba(74, 122, 78, .35);
    z-index: 10;
}

/* ---------- состояние загрузки ---------- */

.cpm-loading {
    padding: 40px 16px;
    font-size: 14px;
    color: var(--cpm-muted);
}

.cpm-error {
    margin: 14px;
    padding: 12px 14px;
    background: var(--cpm-debt);
    color: var(--cpm-debt-ink);
    border-radius: 4px;
}

/* карточка участка */
#cp_dialog { display: none; }
.ui-dialog { font-size: 13px; }