/* ══════════════════════════════════════════════════
   Shared UI Components — reusable patterns across panels
   ══════════════════════════════════════════════════ */

/* ── Search input with icon & clear button ── */
.search-wrap{position:relative;flex:1;min-width:0;display:flex;align-items:center;}
/* Magnifier icon — CSS-rendered (no inline SVG markup needed in HTML).
   Markup may use an empty <span class="search-icon"></span>, an inline SVG
   with the same class, or omit the element entirely (a ::before on the
   wrapper draws it). */
.search-wrap::before,
.search-wrap .search-icon{
  content:'';
  position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;color:var(--text-muted);pointer-events:none;
  transition:opacity .15s;flex-shrink:0;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") center/contain no-repeat;
}
/* Hide pseudo when an inline .search-icon is present (avoids double icon). */
.search-wrap:has(> .search-icon)::before{display:none;}
.search-wrap.has-value::before,
.search-wrap.has-value .search-icon{opacity:0;pointer-events:none;}
.search-clear{
  position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border:none;background:none;padding:0;
  color:var(--text-muted);cursor:pointer;display:none;
  place-items:center;border-radius:2px;transition:color .15s;
}
.search-clear svg{width:12px;height:12px;}
.search-clear:hover{color:var(--text);}
.search-wrap.has-value .search-clear{display:grid;}

/* ── Search text input (shared base) ── */
.outliner-search,
.alib-search{
  flex:1;font-size:11px;padding:5px 8px 5px 24px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface-raised);color:var(--text);
  height:26px;box-sizing:border-box;
}
.outliner-search:focus,
.alib-search:focus{border-color:var(--primary);outline:none;}

/* ── Popup menu items (shared base) ──
   Single canonical style for ALL popup-menu items in the app.
   Containers should use --r-md radius and 4px inner padding; items use
   --r-sm so the hover background visually nests inside the container. */
.fc-dropdown-item,
.alib-filter-item,
.optim-preset-item,
.tl-dropdown-item,
.sb-unit-item,
.usedby-item,
.mcp-option{
  display:flex;align-items:center;gap:8px;
  width:100%;min-height:26px;padding:5px 10px;
  text-align:left;
  font-family:inherit;font-size:12px;font-weight:400;
  border:none;background:none;cursor:pointer;
  color:var(--text);white-space:nowrap;
  border-radius:var(--r-sm);
  transition:background .12s, color .12s;
  box-sizing:border-box;
}
.fc-dropdown-item:hover,
.alib-filter-item:hover,
.optim-preset-item:hover,
.tl-dropdown-item:hover,
.sb-unit-item:hover,
.usedby-item:hover,
.mcp-option:hover{background:var(--primary-bg);color:var(--primary);}
.fc-dropdown-item.active,
.alib-filter-item.active,
.optim-preset-item.active,
.tl-dropdown-item.active,
.sb-unit-item.active,
.usedby-item.active{background:var(--primary-bg);color:var(--primary);font-weight:400;}
.fc-dropdown-item:hover,
.alib-filter-item:hover,
.optim-preset-item:hover,
.tl-dropdown-item:hover,
.sb-unit-item:hover,
.usedby-item:hover,
.mcp-option:hover{background:var(--primary-bg);color:var(--primary);}
.fc-dropdown-item.active,
.alib-filter-item.active,
.optim-preset-item.active,
.tl-dropdown-item.active,
.sb-unit-item.active,
.usedby-item.active{background:var(--primary-bg);color:var(--primary);font-weight:400;}

/* ── Popup separators ── */
.fc-dropdown-sep,
.optim-preset-sep,
.usedby-sep{height:1px;background:var(--border-light);}

/* ══════════════════════════════════════════════════
   Splitter — gap-style draggable handle
   .splitter.is-h  → horizontal resize (between columns)
   .splitter.is-v  → vertical resize   (between stacked rows)
   Add .dragging while user is dragging to keep indicator visible.
   ══════════════════════════════════════════════════ */
.splitter{
  position:relative;flex-shrink:0;
  z-index:var(--z-overlay);
  transition:opacity .15s ease;
}
.splitter::before{content:'';position:absolute;}      /* invisible hit area */
.splitter::after{
  content:'';position:absolute;
  border-radius:2px;background:var(--border-focus);
  opacity:0;transition:opacity .15s ease;
}
.splitter:hover::after,
.splitter.dragging::after{opacity:1;}

/* Horizontal resize (column separator) */
.splitter.is-h{
  width:0;cursor:ew-resize;
  margin:0 calc(var(--panel-gap) * -0.5);
}
.splitter.is-h::before{top:0;bottom:0;left:-4px;width:9px;}
.splitter.is-h::after{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:3px;height:20px;
}

/* Vertical resize (row separator) */
.splitter.is-v{
  height:0;cursor:ns-resize;
  margin:calc(var(--panel-gap) * -0.5) 0;
}
.splitter.is-v::before{left:0;right:0;top:-5px;height:11px;}
.splitter.is-v::after{
  left:50%;top:0;transform:translate(-50%,-50%);
  width:20px;height:3px;
}