/* Конструкторы схемы и плана помещения: палитра, этажи, полотно, объекты, ресайз.
   Графика объектов — SVG-символы из js/data/glyphs.js. Символ не знает о цветах:
   он рисует var(--g-*), а слой (статус брони, вид декора, тип комнаты) задаёт
   эти переменные здесь. Поэтому тема, статус и выделение меняют вид без пересборки SVG. */

/* ── палитра цветов символов ───────────────────────────────────────────── */
.g-host{
  --g-fill:var(--surface);      /* тело объекта */
  --g-line:var(--ink-soft);     /* контур */
  --g-ink:var(--ink-soft);      /* детали, штриховка */
  --g-soft:var(--surface-2);    /* вторичные объёмы: стулья, полки */
  --g-wall:var(--ink-soft);     /* глухое: стены, колонны, ТВ */
  --g-water:var(--accent-soft); /* вода и стекло */
  --g-green:var(--ok-soft);     /* зелень */
}
.g-svg,.g-thumb{display:block;overflow:visible}
.plan-svg{width:100%;height:auto;display:block}

.editor{display:grid;grid-template-columns:236px 1fr 288px;gap:14px;align-items:start}
.pal-h{padding:13px 15px 0}
.pal-b{padding:12px 15px 15px}
.pal-item{display:flex;align-items:center;gap:10px;width:100%;border:1px dashed var(--line);background:var(--surface-2);border-radius:10px;padding:8px 10px;margin-bottom:6px;text-align:left;transition:.12s}
.pal-item:hover{border-color:var(--accent);background:var(--accent-soft)}
.pal-item .glyph{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--accent)}
.pal-item .glyph svg{width:18px;height:18px}
/* миниатюра-символ: тот же рисунок, что ляжет на полотно — видно, что добавляешь */
.pal-item .thumb{flex:none;width:44px;height:34px;display:grid;place-items:center;overflow:hidden}
.pal-item .pl-t{font-weight:600;font-size:13px;line-height:1.15}
.pal-item .pl-s{font-size:11px;color:var(--ink-faint)}
.pal-item .plus{margin-left:auto;color:var(--ink-faint);font-size:15px}
.pal-item.dec{border-style:solid;opacity:.95}
.pal-group{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin:12px 0 6px;padding-top:9px;border-top:1px solid var(--line-soft)}
.pal-group:first-child{margin-top:0;padding-top:0;border-top:0}
.legend{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:11px;display:flex;flex-direction:column;gap:7px}
.legend .row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-soft)}
.legend .sw{width:13px;height:13px;border-radius:4px;border:1px solid}

/* пикер иконок и символов в конструкторе типов */
.icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.icon-pick{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;height:38px;display:grid;place-items:center;color:var(--ink-soft)}
.icon-pick.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.icon-pick svg{width:18px;height:18px}
.glyph-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.glyph-pick{border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px 4px 6px;display:grid;justify-items:center;gap:4px}
.glyph-pick .gp-box{height:34px;display:grid;place-items:center;overflow:hidden}
.glyph-pick .gp-l{font-size:10px;line-height:1.15;color:var(--ink-faint);text-align:center}
.glyph-pick.on{border-color:var(--accent);background:var(--accent-soft)}
.glyph-pick.on .gp-l{color:var(--accent-ink)}

/* живое превью размера примитива в конструкторе типов */
.type-size{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.type-preview{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tp-stage{position:relative;height:210px;display:grid;place-items:center;background-color:var(--canvas);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:var(--cell,26px) var(--cell,26px)}
.tp-node{display:grid;place-items:center}
.tp-meta{padding:9px 12px;font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line);line-height:1.5}
.tp-meta b{color:var(--ink)}
@media (max-width:900px){.type-size{grid-template-columns:1fr}}

/* ── полотно и зоны ────────────────────────────────────────────────────── */
.floors{display:flex;gap:6px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.floor-tab{border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.floor-tab[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.floor-add{border:1px dashed var(--line);background:transparent;border-radius:9px;padding:6px 11px;font-size:15px;color:var(--ink-faint);line-height:1}
.floor-meta{margin-left:auto;font-size:11.5px;color:var(--ink-faint)}
.floor-meta b{font-family:"JetBrains Mono",monospace;font-weight:500;color:var(--ink-soft)}

.stage{position:relative;height:520px;background-color:var(--canvas);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  /* Схема может быть шире колонки (широкий зал, участок базы) — тогда полотно
     прокручивается, а не обрезает план. Перетаскивание учитывает прокрутку. */
  background-size:var(--cell,26px) var(--cell,26px);overflow:auto;touch-action:none;border-radius:0 0 var(--radius) var(--radius)}
.stage-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-faint);font-size:13px;text-align:center;padding:24px;pointer-events:none}
/* масштабная линейка в углу полотна — чтобы размеры читались без инспектора */
.stage-ruler{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--ink-faint);pointer-events:none;user-select:none}
.stage-ruler i{display:block;height:7px;border:1px solid var(--ink-faint);border-top:0;opacity:.75}

/* ── объект на схеме ───────────────────────────────────────────────────── */
/* .node — только геометрия и события; рисует вложенный .n-shape с SVG, подпись
   висит под объектом (.n-tag) и не поворачивается вместе с ним. */
.node{position:absolute;cursor:grab;user-select:none;touch-action:none}
.node:active{cursor:grabbing}
.n-shape{position:absolute;inset:0;transform-origin:50% 50%}
.n-shape>svg{width:100%;height:100%}
.node.sel{z-index:5}
.node.sel .n-shape{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
/* Подпись под объектом. На плотной схеме имена соседних объектов налезали бы друг
   на друга, поэтому подпись усечена по ширине и раскрывается целиком при наведении
   и выделении — как всплывающая подсказка, но без задержки. */
.n-tag{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;pointer-events:none;
  max-width:104px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:center;font-size:10.5px;font-weight:600;line-height:1.25;color:var(--ink);
  background:color-mix(in srgb,var(--canvas) 78%,transparent);border-radius:5px;padding:1px 5px}
.n-tag .n-cap{display:block;font-size:9.5px;font-weight:500;color:var(--ink-faint)}
.node:hover .n-tag,.node.sel .n-tag{max-width:none;overflow:visible;z-index:9;
  background:var(--surface);box-shadow:0 1px 6px rgba(22,32,43,.16)}
.node:hover{z-index:7}

/* статус брони перекрашивает символ целиком: тело — мягкой заливкой, контур — цветом */
.node[data-status="free"]{--g-fill:var(--ok-soft);--g-line:var(--ok);--g-soft:var(--surface);--g-ink:var(--ok)}
.node[data-status="hold"]{--g-fill:var(--hold-soft);--g-line:var(--hold);--g-soft:var(--surface);--g-ink:var(--hold)}
.node[data-status="busy"]{--g-fill:var(--busy-soft);--g-line:var(--busy);--g-soft:var(--surface);--g-ink:var(--busy)}
.node.pickable{cursor:pointer}
.node.picked{z-index:6}
.node.picked .n-shape{outline:3px solid var(--accent);outline-offset:3px}
.node.disabled{opacity:.55;cursor:not-allowed}

/* ── слои разметки и благоустройства ───────────────────────────────────── */
.node.decor{z-index:0}
.node.decor.sel .n-shape{outline-style:dashed}
.d-wall{--g-wall:var(--ink-soft);--g-line:var(--ink-soft)}
.d-open{--g-line:var(--accent);--g-fill:var(--accent-soft);--g-ink:var(--accent);--g-wall:var(--accent)}
.d-green{--g-green:var(--ok-soft);--g-line:var(--ok);--g-ink:var(--ok);--g-fill:var(--ok-soft);--g-soft:var(--ok-soft)}
.d-water{--g-water:var(--accent-soft);--g-line:var(--accent);--g-ink:var(--accent)}
.d-wood{--g-fill:var(--hold-soft);--g-line:var(--hold);--g-ink:var(--hold);--g-soft:var(--hold-soft)}
.d-gray{--g-fill:var(--surface-2);--g-line:var(--ink-faint);--g-ink:var(--ink-faint);--g-soft:var(--line);--g-wall:var(--ink-faint)}
.d-stage{--g-fill:var(--hold-soft);--g-line:var(--hold);--g-ink:var(--hold);--g-soft:var(--surface-2)}
.d-text{pointer-events:auto}
.node.decor.d-text .n-shape{display:grid;place-items:center}
.dec-text{position:absolute;inset:0;display:grid;place-items:center;font-family:"Unbounded",sans-serif;font-size:12px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.02em;white-space:nowrap;pointer-events:none}

.resize-h{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;border-radius:4px;background:var(--accent);border:2px solid var(--surface);cursor:nwse-resize;z-index:8}

/* ── инспектор ─────────────────────────────────────────────────────────── */
.status-row{display:flex;gap:6px}
.status-row button{flex:1;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px 4px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.status-row button[data-on="free"][aria-pressed="true"]{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.status-row button[data-on="hold"][aria-pressed="true"]{background:var(--hold-soft);border-color:var(--hold);color:var(--hold)}
.status-row button[data-on="busy"][aria-pressed="true"]{background:var(--busy-soft);border-color:var(--busy);color:var(--busy)}
.danger{width:100%;margin-top:12px;border:1px solid var(--busy);color:var(--busy);background:transparent;border-radius:9px;padding:9px;font-weight:600;font-size:13px}
/* карточка выбранного объекта в инспекторе: символ + габариты в метрах */
.insp-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.insp-head .ih-box{width:54px;height:44px;flex:none;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.insp-head .ih-t{font-weight:600;font-size:13.5px;line-height:1.2}
.insp-head .ih-s{font-size:11.5px;color:var(--ink-faint);font-family:"JetBrains Mono",monospace}

/* ── внутренний план: комнаты ──────────────────────────────────────────── */
.room{position:absolute;z-index:1;border:1.5px solid var(--g-line);background:var(--g-fill);border-radius:5px;
  cursor:grab;user-select:none;touch-action:none}
.room:active{cursor:grabbing}
/* слой подписей — выше мебели (z-index 3–4), но кликами не перехватывает перетаскивание */
.room-label{position:absolute;z-index:5;display:grid;place-items:center;pointer-events:none;
  font-size:11.5px;font-weight:600;color:var(--ink-soft);text-align:center;padding:2px;line-height:1.2;overflow:hidden}
/* Комната выделяется, но НИКОГДА не перекрывает мебель (мебель всегда выше — z-index:3+).
   Иначе клик по комнате прятал бы всю расставленную мебель за её фоном. */
.room.sel{outline:2.5px solid var(--accent);outline-offset:2px;z-index:2}
/* Название комнаты лежит поверх расставленной мебели, поэтому у него своя подложка —
   иначе текст сливается с кроватью или кухонным гарнитуром. */
.room-label>span{background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:5px;padding:1px 6px;max-width:100%}
.room-label .rm-area{display:block;font-size:9.5px;font-weight:500;color:var(--ink-faint);font-family:"JetBrains Mono",monospace}
.k-living {--g-fill:var(--accent-soft);--g-line:var(--accent)}
.k-bedroom{--g-fill:var(--surface);--g-line:var(--ink-soft)}
.k-kitchen{--g-fill:var(--ok-soft);--g-line:var(--ok)}
.k-dining {--g-fill:var(--ok-soft);--g-line:var(--ok)}
.k-bath   {--g-fill:var(--hold-soft);--g-line:var(--hold)}
.k-sauna  {--g-fill:var(--busy-soft);--g-line:var(--busy)}
.k-hall   {--g-fill:var(--surface-2);--g-line:var(--ink-faint)}
.k-office {--g-fill:var(--surface);--g-line:var(--ink-faint)}
.k-closet {--g-fill:var(--surface-2);--g-line:var(--ink-faint)}
.k-terrace{--g-fill:var(--surface-2);--g-line:var(--ok)}
.k-balcony{--g-fill:var(--surface-2);--g-line:var(--ok)}
.k-tech   {--g-fill:var(--surface-2);--g-line:var(--ink-faint)}
.k-other  {--g-fill:var(--surface-2);--g-line:var(--ink-soft)}
.room-sw{width:30px;height:21px;border-radius:5px;flex:none;border:1.5px solid var(--g-line);background:var(--g-fill)}

/* ── внутренний план: мебель и проёмы (всегда поверх комнат) ───────────── */
.fixture{position:absolute;z-index:3;cursor:grab;user-select:none;touch-action:none}
.fixture:active{cursor:grabbing}
.fixture .n-shape{position:absolute;inset:0;transform-origin:50% 50%}
.fixture .n-shape>svg{width:100%;height:100%}
.fixture.sel{z-index:4}
.fixture.sel .n-shape{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.f-wall   {--g-wall:var(--ink);--g-line:var(--ink)}
.f-open   {--g-line:var(--accent);--g-fill:var(--accent-soft);--g-ink:var(--accent);--g-wall:var(--accent)}
.f-wood   {--g-fill:var(--surface);--g-line:var(--ink-soft);--g-soft:var(--surface-2);--g-ink:var(--ink-soft)}
.f-gray   {--g-fill:var(--surface-2);--g-line:var(--ink-faint);--g-wall:var(--ink-faint);--g-ink:var(--ink-faint)}
.f-kitchen{--g-fill:var(--ok-soft);--g-line:var(--ok);--g-ink:var(--ok);--g-soft:var(--surface)}
.f-bath   {--g-fill:var(--hold-soft);--g-line:var(--hold);--g-ink:var(--hold);--g-soft:var(--surface)}
.f-water  {--g-fill:var(--surface);--g-water:var(--accent-soft);--g-line:var(--accent);--g-ink:var(--accent)}
.f-green  {--g-green:var(--ok-soft);--g-line:var(--ok);--g-ink:var(--ok)}
.f-soft   {--g-soft:var(--surface-2);--g-line:var(--ink-faint);--g-ink:var(--ink-faint)}

/* ── список ресурсов (в т.ч. без схемы) ────────────────────────────────── */
.rlist{display:flex;flex-direction:column;gap:8px}
.rcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:var(--surface);cursor:pointer}
.rcard.sel,.rcard.picked{border-color:var(--accent);background:var(--accent-soft)}
.rcard .av{width:40px;height:40px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent);flex:none}
.rcard .av svg{width:20px;height:20px}
.rcard .rc-t{font-weight:600;font-size:14px}
.rcard .rc-s{font-size:12px;color:var(--ink-faint)}
.rcard .rc-r{margin-left:auto;text-align:right;font-size:11.5px;color:var(--ink-soft)}
.rcard .rc-r b{font-family:"JetBrains Mono";font-size:15px;display:block}