/*! v7工作室AI版 · [R191] 左栏按钮列表 → 顶栏横排融合（纯皮肤层）
 * ---------------------------------------------------------------------------
 * 爸：「左边得按钮列表弄成横排放到最顶上面一排融合一起」
 *
 * 做法：
 *   1) mk-topnav.js 把 .sidebar 里的 a.nav-btn / button.nav-btn / .header-logout
 *      整体搬进 .header 末尾新建的 .mk-topnav（不删节点，React 事件照常生效）
 *   2) .header 改成 flex-wrap 容器：第一行保持原样（时钟牌 / 搜索 / 右侧状态），
 *      .mk-topnav 占满第二行 → 与顶栏同背景、无间隙（融合）
 *   3) 左栏只保留品牌卡；「设备分组」浮面板停靠到品牌卡下方
 *      （mk-ui.js 的 fgpFix 只认 .sidebar 里的「设备」按钮，按钮搬走后它自动失效）
 *
 * 回退：删掉 index.html 里本文件一行即可。
 * ========================================================================== */

/* 顶栏：变成两行容器（选择器特意压过 mk-ui.css / mk-light.css 的 html[data-theme] .header 高度） */
html body .app > .header {
  height: auto !important;
  min-height: 0 !important;
  flex-wrap: wrap !important;
  row-gap: 0 !important;
  padding-bottom: 0 !important;
}

/* 第二行：左栏按钮列表（横排） */
html body .app > .header > .mk-topnav {
  flex: 0 0 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 0 9px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(120, 160, 200, .16) !important;
  box-sizing: border-box !important;
}

/* 按钮：竖排「图标 + 文字」→ 横排药丸 */
html body .app > .header > .mk-topnav > .nav-btn,
html body .app > .header > .mk-topnav > .header-logout {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 11px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
html body .app > .header > .mk-topnav > .nav-btn svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}
html body .app > .header > .mk-topnav > .nav-btn .nav-label,
html body .app > .header > .mk-topnav > .header-logout > span {
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
/* 原左栏的高亮竖条在横排里不合适 */
html body .app > .header > .mk-topnav > .nav-btn.active:before { display: none !important; }

/* 左上角「中国时间」时钟牌：原本竖居中（top:50% + translateY(-50%)），
   顶栏变两行后会压到第二行按钮上 → 钉回第一行 */
html body .app > .header > .app-brand > .mk-clockchip {
  top: 0 !important;
  transform: none !important;
}

/* 「设备分组」浮面板：保持 fixed（不占内容排序），停靠左栏品牌卡下方 */
html body .main > .table-area > .fgp-root {
  position: fixed !important;
  left: 6px !important;
  right: auto !important;
  top: var(--mk191-fgp-top, 150px) !important;
  width: 168px !important;
  max-width: 168px !important;
}

/* 窄屏：一行放不下时横向滚动，不折行堆高 */
@media (max-width: 1600px) {
  html body .app > .header > .mk-topnav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
  }
}