/* ============================================================================
 * fix_search_overlap_v2.css — 修复搜索栏「两个框」重叠
 *
 * 实测根因（Playwright + Chrome, 1600×900）：
 *   全局注入页 y=198 处，Ant Input.Search 渲染出
 *     .ant-input-group-wrapper (w=400) + .ant-input-wrapper (w=400)
 *     + .ant-input-affix-wrapper (w=358) + 内层 .ant-input (w=287)
 *   因 main css / premium_theme / 内联 <style> 三层 display 竞争
 *   （table / flex / inline-block 互相覆盖），这些嵌套 wrapper 被算成
 *   两个并排的可见盒子 → 用户看到「搜索栏里有两个框」。
 *
 * 修复策略：
 *   1) 全局统一 .ant-input-search 的几何为单一 flex 行（特异性压过所有
 *      #root 竞争规则），宽度锁定 min(400px,100%)。
 *   2) 内层 affix-wrapper flex:1 占满，输入框 flex:1 min-width:0，
 *      group-addon 固定 42px，清除 wrapper 多重背景/边框叠加。
 *   3) 终端控制页搜索行的视图切换按钮 + 搜索框 + 筛选器垂直对齐。
 *   4) 设计基调：暗底 rgba(19,19,23,.9)、边框 rgba(148,163,184,.25)、
 *      靛蓝紫 #6366f1→#8b5cf6、圆角 8px。
 *
 * 选择器统一带 html body:has(.brand-lockup) 前缀 + #root（匹配现有
 * premium_theme / 内联 style 的最高特异性层），全部 !important。
 * ==========================================================================*/

/* ---- 1. 全局注入页 / 任意页面的 Input.Search：单一 flex 行 ---------------- */

/* 外层：一个盒子、一个边框、一个背景 —— 消除「两个框」 */
html body:has(.brand-lockup) #root .ant-input-search,
html body:has(.brand-lockup) #root .ant-input-group-wrapper.ant-input-search {
  display: flex !important;
  align-items: stretch !important;
  width: min(400px, 100%) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: rgba(19, 19, 23, .9) !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  vertical-align: top !important;
}

/* 聚焦态：靛蓝紫描边 + 柔光 */
html body:has(.brand-lockup) #root .ant-input-search:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22),
              0 0 18px rgba(139, 92, 246, .18) !important;
}

/* 内层 wrapper 全部透明、无边框、不额外撑盒子 —— 只保留最外层那一个框 */
html body:has(.brand-lockup) #root .ant-input-search .ant-input-wrapper,
html body:has(.brand-lockup) #root .ant-input-search .ant-input-group {
  display: flex !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input-affix-wrapper {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input-affix-wrapper .ant-input,
html body:has(.brand-lockup) #root .ant-input-search input.ant-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
  color: #e4e5e9 !important;
  font-size: 13px !important;
  caret-color: #818cf8 !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input::placeholder {
  color: rgba(139, 144, 152, .8) !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input-prefix,
html body:has(.brand-lockup) #root .ant-input-search .ant-input-suffix {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 none !important;
  color: rgba(165, 180, 252, .75) !important;
}

/* 清除按钮占位但隐藏时不再挤出第二个盒 */
html body:has(.brand-lockup) #root .ant-input-search .ant-input-clear-icon-hidden {
  display: none !important;
}

/* 搜索按钮（group-addon）：固定 42px，靛蓝紫渐变，圆角只在右端 */
html body:has(.brand-lockup) #root .ant-input-search .ant-input-group-addon {
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 none !important;
  left: auto !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input-group-addon .ant-btn,
html body:has(.brand-lockup) #root .ant-input-search .ant-input-search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border: 0 none !important;
  border-radius: 0 7px 7px 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

html body:has(.brand-lockup) #root .ant-input-search .ant-input-group-addon .ant-btn:hover {
  background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
  box-shadow: 0 0 14px rgba(99, 102, 241, .4) !important;
}

/* 注：注入页重复搜索框的隐藏已由 index.html 内联 lg-layout-final 的
   `#root .ant-input-search:has(input[placeholder*="搜索模板名称或包名"]){display:none}`
   处理，此处不再重复（避免锚点错位成为死规则）。 */

/* ---- 2. 终端控制页搜索行：视图切换按钮 + 搜索框 + 筛选器统一对齐 -------- */

/* 搜索行容器垂直居中、统一 8px 间距 */
html body:has(.brand-lockup) #root .ant-layout-content div[style*="display: flex"]:has(> input[placeholder*="搜索设备"]),
html body:has(.brand-lockup) #root .ant-layout-content div[style*="display:flex"]:has(> input[placeholder*="搜索设备"]) {
  align-items: center !important;
  gap: 8px !important;
}

/* 终端控制页主搜索框：暗底、细边框、8px 圆角、38px 高 */
html body:has(.brand-lockup) #root input[placeholder*="搜索设备"] {
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 12px 0 32px !important;
  background: rgba(19, 19, 23, .9) !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 8px !important;
  color: #e4e5e9 !important;
  font-size: 13px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  caret-color: #818cf8 !important;
}

html body:has(.brand-lockup) #root input[placeholder*="搜索设备"]:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22) !important;
}

html body:has(.brand-lockup) #root input[placeholder*="搜索设备"]::placeholder {
  color: rgba(139, 144, 152, .8) !important;
}

/* 视图切换（网格/表格）两个 39px 按钮：统一 38px 高、暗底、8px 圆角，
   与搜索框贴齐，不再像「框」 */
html body:has(.brand-lockup) #root button[title="网格视图"],
html body:has(.brand-lockup) #root button[title="表格视图"] {
  height: 38px !important;
  min-height: 38px !important;
  width: 39px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(19, 19, 23, .9) !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 8px !important;
  color: #c7cad2 !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) #root button[title="网格视图"]:hover,
html body:has(.brand-lockup) #root button[title="表格视图"]:hover {
  border-color: #6366f1 !important;
  color: #f7f7f8 !important;
  background: rgba(99, 102, 241, .14) !important;
}

/* 终端控制页四个筛选下拉：统一 38px 高、暗底、8px 圆角 */
html body:has(.brand-lockup) #root .ant-layout-content select {
  height: 38px !important;
  min-height: 38px !important;
  line-height: 1.35 !important;
  background: rgba(19, 19, 23, .9) !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 8px !important;
  color: #e4e5e9 !important;
  padding: 0 8px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

html body:has(.brand-lockup) #root .ant-layout-content select:focus {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22) !important;
}

/* 刷新按钮：与搜索框同高，靛蓝紫描边 */
html body:has(.brand-lockup) #root .ant-layout-content button {
  min-height: 32px !important;
  border-radius: 8px !important;
}

/* ---- 3. 通用：任意 ant-input-affix-wrapper 不再出现内外两层边框 --------- */

html body:has(.brand-lockup) #root .ant-input-affix-wrapper {
  align-items: center !important;
  background: rgba(19, 19, 23, .9) !important;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) #root .ant-input-affix-wrapper:focus-within {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .22) !important;
}

html body:has(.brand-lockup) #root .ant-input-affix-wrapper .ant-input {
  background: transparent !important;
  border: 0 none !important;
  box-shadow: none !important;
}

/* 窄屏保护：搜索框不溢出 */
@media (max-width: 768px) {
  html body:has(.brand-lockup) #root .ant-input-search {
    width: 100% !important;
  }
}