/* ============================================================
   Схема зала (AxleVenueMap). Подключается И кабинетом, И гостевым
   приложением. Второй копии этих стилей быть не должно.

   ⚠️ У двух сторон РАЗНЫЕ имена токенов: у гостя --sf/--sf2/--ln/--tx/--tx2/
   --ac, у кабинета --bg-1/--bg-2/--text-1/--text-3/--accent. Поэтому здесь
   один раз разводим их в свои --vm-*, а ниже пользуемся только ими. Без этого
   схема брала фолбэки и оставалась белой в тёмной теме кабинета.
   ============================================================ */

.vm {
    --vm-bg:      var(--sf2, var(--bg-2, #f2f2f2));
    --vm-surface: var(--sf,  var(--bg-1, #ffffff));
    --vm-line:    var(--ln,  var(--bg-2, #dddddd));
    --vm-text:    var(--tx,  var(--text-1, #222222));
    --vm-muted:   var(--tx2, var(--text-3, #888888));
    --vm-accent:  var(--ac,  var(--accent, #e5533d));
    --vm-on-accent: var(--ai, #ffffff);
    --vm-radius:  var(--rd2, 12px);

    position: relative; width: 100%; background: var(--vm-bg);
    border-radius: var(--vm-radius); overflow: hidden; touch-action: none; user-select: none;
}
.vm-svg { display: block; width: 100%; height: 100%; }

/* Сетка и рамка холста — только в редакторе.
   Красим приглушённым ТЕКСТОМ, а не линией: линия в кабинете равна фону
   поверхности, и сетка на тёмной теме исчезала совсем. */
.vm-gl { stroke: var(--vm-muted); stroke-width: 1; opacity: .16; }
.vm-frame { fill: none; stroke: var(--vm-muted); stroke-width: 2; opacity: .38; }

/* ---------- декор ---------- */
.vm-wall-r { fill: none; stroke: var(--vm-text); stroke-width: 3; }
.vm-zone-r { fill: none; stroke: var(--vm-muted); stroke-width: 2; stroke-dasharray: 6 4; }
/* Размеры шрифтов — в ЕДИНИЦАХ ХОЛСТА, а не в пикселях: холст 1200 единиц
   ужимается в 335 px мобильного экрана примерно в 3,5 раза, поэтому 14 «пикселей»
   превращались в 4 и не читались вовсе.
   ⚠️ Гарнитуру не задаём — она наследуется от страницы (у гостя Onest, в кабинете
   Inter). Шорткат `font: … var(--ff, inherit), sans-serif` в кабинете, где --ff нет,
   давал «inherit, sans-serif» — невалидно, правило выпадало целиком, и подписи
   рисовались 15 единицами вместо 24. */
.vm-zone-t { fill: var(--vm-muted); font-weight: 600; font-size: 24px; line-height: 1;
    text-anchor: middle; }
.vm-label-t { fill: var(--vm-text); font-weight: 500; font-size: 22px; line-height: 1.2; }
.vm-icon-g path { fill: none; stroke: var(--vm-muted); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; }

/* ---------- места ---------- */
.vm-place-s { fill: var(--vm-surface); stroke: var(--vm-line); stroke-width: 2; }
.vm-place-t { fill: var(--vm-text); font-weight: 600; font-size: 28px; line-height: 1;
    text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* Голый номер («7», «24») — крупнее: ему хватает места, и он читается на телефоне */
.vm-place-t.vm-num { font-size: 34px; }

/* Состояния гостевого выбора. Занятое НЕ кликается — и это видно, а не только
   в обработчике: курсор и приглушение говорят то же, что сервер. */
.vm-pick .vm-place { cursor: pointer; }
.vm-pick .vm-busy, .vm-pick .vm-unfit, .vm-pick .vm-noprice { cursor: not-allowed; }
.vm-busy .vm-place-s { fill: var(--vm-bg); stroke: transparent; }
.vm-busy .vm-place-t { fill: var(--vm-muted); opacity: .55; }
.vm-unfit .vm-place-s, .vm-noprice .vm-place-s { fill: var(--vm-surface); stroke: var(--vm-line); opacity: .45; }
.vm-unfit .vm-place-t, .vm-noprice .vm-place-t { opacity: .45; }
.vm-place.on .vm-place-s { fill: var(--vm-accent); stroke: transparent; }
.vm-place.on .vm-place-t { fill: var(--vm-on-accent); }

/* ---------- редактор ---------- */
.vm-edit .vm-place, .vm-edit .vm-item { cursor: move; }
.vm-edit[data-tool="wall"] .vm-svg, .vm-edit[data-tool="zone"] .vm-svg { cursor: crosshair; }
.vm-edit[data-tool="place"] .vm-svg, .vm-edit[data-tool="label"] .vm-svg,
.vm-edit[data-tool="icon"] .vm-svg { cursor: copy; }
.vm-edit .vm-place.on .vm-place-s { fill: var(--vm-accent); stroke: transparent; }
.vm-edit .vm-place.on .vm-place-t { fill: var(--vm-on-accent); }
.vm-edit .vm-item.on .vm-wall-r, .vm-edit .vm-item.on .vm-zone-r { stroke: var(--vm-accent); }
.vm-selbox { fill: none; stroke: var(--vm-accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.vm-handle { fill: var(--vm-accent); cursor: nwse-resize; }

/* Место-зеркало кассы: имя задаёт касса, координаты наши — помечаем пунктиром */
.vm-edit .vm-pos .vm-place-s { stroke-dasharray: 5 3; }

/* ---------- панель зума (одинаковая у кабинета и гостя) ---------- */
.vm-zoom { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.vm-zoom button { width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--ln, var(--bg-2, #ddd)); background: var(--sf, var(--bg-1, #fff));
    color: var(--tx, var(--text-1, #222)); font-weight: 600; font-size: 16px; line-height: 1;
    font-family: inherit; }
.vm-zoom button:disabled { opacity: .4; cursor: default; }
.vm-zoom .vm-zoom-sp { flex: 1; }