/* layers.css */

/* ============================================================
   LAYERS TAB
   ============================================================ */
.panel-search{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;background:rgba(0,0,0,.1)}
.search-input{flex:1;padding:6px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-main);font-family:inherit;font-size:11px;outline:none;transition:border-color .15s}
.search-input:focus{border-color:var(--neon-border)}
.mini-btn{width:28px;height:28px;flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);font-size:13px;display:flex;align-items:center;justify-content:center;transition:.15s}
.mini-btn:hover{color:var(--text-main);background:rgba(255,255,255,.08)}
.mini-btn.active{color:var(--neon);background:rgba(var(--neon-rgb),.12);border-color:var(--neon-border)}

.layers-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(var(--neon-rgb),.3) transparent;padding:4px}
.layers-body::-webkit-scrollbar{width:5px}
.layers-body::-webkit-scrollbar-thumb{background:rgba(var(--neon-rgb),.3);border-radius:var(--radius-pill)}
.layers-list{position:relative}
.layers-empty{padding:30px 12px;text-align:center;color:var(--text-muted);font-size:11px;font-style:italic}

.layer-node{position:relative}
.layer-node:nth-child(even)>.layer-row{background:rgba(255,255,255,.018)}
.layer-children{margin-left:11px;border-left:1px dashed rgba(255,255,255,.08);padding-left:3px}
.layer-row{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 3px;border-radius:5px;cursor:pointer;transition:background .12s;user-select:none;font-size:11px;font-family:var(--font-mono);min-height:24px;touch-action:pan-y}
.layer-row:hover{background:rgba(255,255,255,.05)}
.layer-row.selected{background:rgba(var(--neon-rgb),.15);box-shadow:inset 0 0 0 1px var(--neon-border)}
.layer-row.hidden-layer{opacity:.5}
.layer-row.layer-dragging{opacity:.35}
.layer-row.locked-layer{opacity:.7}
.layer-row.locked-layer .layer-name::before{content:'🔒 ';font-size:9px;opacity:.7}

.layer-caret,.layer-caret-spacer{width:14px;height:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.layer-caret{background:transparent;border:none;padding:0;color:var(--text-muted);cursor:pointer;border-radius:3px;transition:.15s}
.layer-caret:hover{color:var(--text-main);background:rgba(255,255,255,.06)}
.layer-caret svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .18s}
.layer-caret.collapsed svg{transform:rotate(0deg)}

.layer-eye{width:18px;height:18px;flex-shrink:0;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:0;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:.15s}
.layer-eye:hover{color:var(--text-main);background:rgba(255,255,255,.06)}
.layer-eye svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.layer-eye.hidden-eye{color:var(--neon)}
.layer-eye-spacer{width:18px;height:18px;flex-shrink:0}

.layer-icon{width:16px;height:16px;flex-shrink:0;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;font-family:var(--font-mono)}
.layer-icon[data-type="g"]{background:#64748b}
.layer-icon[data-type="rect"]{background:#06b6d4}
.layer-icon[data-type="circle"],.layer-icon[data-type="ellipse"]{background:#10b981}
.layer-icon[data-type="line"]{background:#eab308}
.layer-icon[data-type="path"],.layer-icon[data-type="polygon"],.layer-icon[data-type="polyline"]{background:#a855f7}
.layer-icon[data-type="text"]{background:#f97316}
.layer-icon[data-type="image"]{background:#ec4899}
.layer-icon[data-type="use"]{background:#14b8a6}
.layer-icon[data-type="a"]{background:#0ea5e9}
.layer-icon[data-type="svg"]{background:#475569}

.layer-color-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.5);flex-shrink:0;margin:0 2px}
.layer-color-dot.transparent{background:linear-gradient(45deg,#444 25%,transparent 25%,transparent 75%,#444 75%),linear-gradient(45deg,#444 25%,#222 25%,#222 75%,#444 75%),#222;background-size:4px 4px;background-position:0 0,2px 2px}

.layer-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-main)}
.layer-id{color:var(--neon);font-size:10px;margin-left:2px}
.layer-class{color:var(--text-muted);font-size:9.5px;margin-left:4px}
.layer-text{color:var(--text-muted);font-style:italic;font-size:9.5px}

.layer-btns{display:flex;gap:0;opacity:0;transition:opacity .12s;flex-shrink:0}
.layer-row:hover .layer-btns,.layer-row.selected .layer-btns{opacity:1}
.layer-btn{width:18px;height:18px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:0;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;font-family:var(--font-mono);transition:.12s}
.layer-btn:hover{color:var(--text-main);background:rgba(255,255,255,.1)}
.layer-btn.danger:hover{color:#f87171;background:rgba(225,29,72,.18)}
.layer-drag{font-size:9px;color:var(--text-muted);cursor:grab;opacity:0;transition:opacity .12s;padding:0;letter-spacing:-2px;flex-shrink:0;user-select:none;touch-action:none}
.layer-row:hover .layer-drag{opacity:.4}
.layer-row:hover .layer-drag:hover{opacity:1;color:var(--neon)}

.layer-service{font-style:italic;opacity:.75}
.layer-service .layer-name{color:var(--text-muted)}
.layer-service .layer-icon{background:rgba(255,255,255,.1)!important;color:var(--text-muted)!important}
.layer-service:hover{opacity:1}

.is-hidden-layer{opacity:.55}
.is-hidden-layer .layer-name{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2)}
.is-hidden-layer.hidden-layer{opacity:.4}

.layer-drop-indicator{position:absolute;height:2px;background:var(--neon);border-radius:2px;box-shadow:0 0 8px var(--neon-glow);pointer-events:none;z-index:5}

/* Drop "внутрь" контейнера */
.layer-row.drop-into{
  background:rgba(var(--neon-rgb),.28)!important;
  box-shadow:inset 0 0 0 2px var(--neon);
  outline:2px dashed var(--neon);
  outline-offset:-2px;
  border-radius:5px;
}
.layer-row.drop-into .layer-name{color:#fff}

@media (hover: none) {
  .layer-drag { opacity: 0.55; }
}