@charset "utf-8";
/* ============================================================
   hb-tabs.css  —  控制页右侧「所有标签页」通用排版层
   目标：统一卡头 / 工具条 / 表格 / 分页条 / 空状态 / 滚动条
   只做样式；结构锚点由 hb-tabs.js 打 class（hb-tabpane 等）
   优先级低于 hb-ai.css / hb-appinj.css，不会互相打架
   ============================================================ */

/* ---------- 外壳：去掉「卡片套卡片」的双层内边距 ---------- */
.hb-tabpane > [data-slot="card"]{
  padding:0 !important;
  gap:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:0 !important;
}
.hb-tabpane .hb-tab-body{
  padding:10px 12px 12px !important;
}
.hb-tabpane .hb-tab-body > [data-slot="card"]{
  border:1px solid #e8eefa !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 1px 2px rgba(12,18,34,.03) !important;
}

/* ---------- 卡头：标题不竖排、按钮紧凑 ---------- */
.hb-tabpane .hb-tab-head{
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}
.hb-tabpane .hb-tab-head > *{
  flex:0 0 auto !important;
  min-width:0 !important;
}
.hb-tabpane .hb-tab-head > *:first-child{
  flex-wrap:nowrap !important;
}
.hb-tabpane .hb-tab-head span,
.hb-tabpane .hb-tab-head h1,
.hb-tabpane .hb-tab-head h2,
.hb-tabpane .hb-tab-head p{
  white-space:nowrap !important;
}
.hb-tabpane .hb-tab-head span.text-sm.font-semibold,
.hb-tabpane .hb-tab-head h1,
.hb-tabpane .hb-tab-head h2{
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  color:#0e1a31 !important;
}
.hb-tabpane .hb-tab-head button{
  height:28px !important;
  min-height:28px !important;
  padding:0 10px !important;
  font-size:11.5px !important;
  border-radius:8px !important;
  gap:4px !important;
}
.hb-tabpane .hb-tab-head button svg{ width:13px !important; height:13px !important; }
.hb-tabpane .hb-tab-head span.inline-flex{
  height:19px !important;
  padding:0 7px !important;
  font-size:10px !important;
  line-height:17px !important;
  border-radius:6px !important;
}

/* ---------- 工具条 / 输入框 ---------- */
.hb-tabpane input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  height:30px !important;
  font-size:12px !important;
  border-radius:8px !important;
}
.hb-tabpane .hb-tab-body > .flex,
.hb-tabpane .hb-tab-body > [class*="flex-wrap"]{
  row-gap:6px !important;
}

/* ---------- 表格 ---------- */
.hb-tabpane table{ width:100% !important; }
.hb-tabpane thead th{
  height:30px !important;
  padding:0 8px !important;
  font-size:11px !important;
  font-weight:600 !important;
  color:#6b778c !important;
  background:#f7faff !important;
  white-space:nowrap !important;
  border-bottom:1px solid #eef3fb !important;
}
.hb-tabpane tbody td{
  padding:7px 8px !important;
  font-size:11.5px !important;
  border-bottom:1px solid #f4f7fc !important;
  vertical-align:middle !important;
}
.hb-tabpane tbody tr:hover{ background:#f8fbff !important; }
.hb-tabpane tbody td .font-mono,
.hb-tabpane tbody td .truncate{ font-size:11px !important; }
.hb-tabpane tbody td button{
  height:23px !important;
  min-height:23px !important;
  padding:0 7px !important;
  font-size:10.5px !important;
  line-height:1 !important;
  border-radius:6px !important;
}

/* ---------- 分页条：绝不竖排 ---------- */
.hb-tabpane .hb-tab-foot{
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  row-gap:6px !important;
  column-gap:10px !important;
  padding:6px 0 0 !important;
  margin:0 !important;
}
.hb-tabpane .hb-tab-foot > *{
  flex:0 0 auto !important;
  margin-left:0 !important;
  white-space:nowrap !important;
}
.hb-tabpane .hb-tab-foot > div{ gap:6px !important; }
.hb-tabpane .hb-tab-foot p{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.4 !important;
  color:#8b97ab !important;
  white-space:nowrap !important;
}
.hb-tabpane .hb-tab-foot .text-sm,
.hb-tabpane .hb-tab-foot span,
.hb-tabpane .hb-tab-foot div{
  font-size:11px !important;
  line-height:1.5 !important;
  white-space:nowrap !important;
}
.hb-tabpane .hb-tab-foot button{
  height:26px !important;
  min-height:26px !important;
  padding:0 7px !important;
  font-size:11px !important;
  border-radius:7px !important;
}
.hb-tabpane .hb-tab-foot button[role="combobox"]{
  min-width:56px !important;
  justify-content:space-between !important;
}
.hb-tabpane .hb-tab-foot svg{ width:13px !important; height:13px !important; }

/* ---------- 空状态 ---------- */
.hb-tabpane .text-center.py-16{
  padding:44px 0 !important;
  font-size:12px !important;
  color:#94a3b8 !important;
}

/* ---------- 滚动条 ---------- */
.hb-tabpane ::-webkit-scrollbar{ width:6px; height:6px; }
.hb-tabpane ::-webkit-scrollbar-track{ background:transparent; }
.hb-tabpane ::-webkit-scrollbar-thumb{ background:#dde6f3; border-radius:99px; border:1px solid #fff; }
.hb-tabpane ::-webkit-scrollbar-thumb:hover{ background:#c7d5ea; }

/* ---------- 摄像/麦克风：两栏 → 上下两段（原面板太窄会溢出裁切） ---------- */
.hb-tabpane.hb-tab-cam > [class*="flex"][class*="gap-3"]{
  flex-direction:column !important;
  gap:10px !important;
  overflow-y:auto !important;
  min-height:0 !important;
}
.hb-tabpane.hb-tab-cam > [class*="flex"][class*="gap-3"] > *{
  width:100% !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}
.hb-tabpane.hb-tab-cam .p-0{ padding:0 !important; }
.hb-tabpane.hb-tab-cam [class*="shrink-0"][class*="gap-1.5"]{
  flex-wrap:wrap !important;
}

/* 摄像头预览区给个最小高度，避免压成一条线 */
.hb-tabpane.hb-tab-cam .p-0 [class*="flex-1"][class*="min-h-0"]{
  min-height:170px !important;
}

/* ---------- 分页条收紧：强制单行，页码按钮 26px ---------- */
.hb-tabpane .hb-tab-foot{flex-wrap:nowrap !important; gap:8px !important; overflow:hidden !important}
.hb-tabpane .hb-tab-foot > .hb-pager{
  flex-wrap:nowrap !important;
  height:26px !important;
  align-items:center !important;
  column-gap:4px !important;
}
.hb-tabpane .hb-tab-foot > .hb-pager p{margin:0 !important}
.hb-tabpane .hb-tab-foot > .hb-pager button[role="combobox"]{min-width:48px !important;height:26px !important;padding:0 6px !important}
.hb-tabpane .hb-tab-foot nav{
  flex:0 0 auto !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
}
.hb-tabpane .hb-tab-foot nav ul{display:flex !important;gap:2px !important;margin:0 !important;padding:0 !important;list-style:none !important}
.hb-tabpane .hb-tab-foot nav ul li{margin:0 !important;padding:0 !important}
.hb-tabpane .hb-tab-foot nav ul li a,
.hb-tabpane .hb-tab-foot nav ul li span,
.hb-tabpane .hb-tab-foot nav ul li button{
  width:26px !important;height:26px !important;min-width:26px !important;min-height:26px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  font-size:11px !important;line-height:1 !important;border-radius:7px !important;padding:0 !important;
}
.hb-tabpane .hb-tab-foot nav ul li svg{width:12px !important;height:12px !important}

/* ---------- 卡头吸顶：滚动时标题/操作不跑掉 ---------- */
.hb-tabpane .hb-tab-head{
  position:sticky !important;
  top:0 !important;
  z-index:3 !important;
  background:linear-gradient(#fff 78%,rgba(255,255,255,0)) !important;
  padding-bottom:6px !important;
}
.hb-tabpane.hb-tab-cam .hb-tab-head{position:static !important}

/* ---------- AI 面板头部吸顶 ---------- */
.hb-tabpane .hb-ai-head{
  position:sticky !important;
  top:0 !important;
  z-index:4 !important;
  background:#f4f7fc !important;
}

/* 相册/键盘等内容区底部留一点呼吸空间 */
.hb-tabpane .hb-tab-body{padding-bottom:12px !important}


/* ============================================================
   2026-11-02 控制页顶部工具条重做（爹要求：按钮 UI + 文案重设计）
   只作用于 hb-tabs.js 打的 .hb-tabbar，不动其它 Tabs
   ============================================================ */
.hb-tabbar{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:5px !important;
  padding:6px !important;
  border-radius:16px !important;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%) !important;
  border:1px solid #e3ecf9 !important;
  box-shadow:0 12px 28px -26px rgba(15,40,90,.55),inset 0 1px 0 #ffffff !important;
  width:max-content !important;
  max-width:100% !important;
  height:auto !important;
}

.hb-tabbar [data-slot="tabs-trigger"]{
  height:34px !important;
  padding:0 10px !important;
  gap:7px !important;
  border-radius:10px !important;
  border:1px solid #e4ecf8 !important;
  background:#ffffff !important;
  color:#51617a !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  line-height:1 !important;
  box-shadow:0 1px 2px rgba(16,38,80,.04) !important;
  transition:transform .16s cubic-bezier(.22,.8,.3,1),background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease !important;
}
.hb-tabbar [data-slot="tabs-trigger"] svg{
  width:15px !important;
  height:15px !important;
  color:#7f8da4 !important;
  transition:color .16s ease !important;
}
.hb-tabbar [data-slot="tabs-trigger"]:hover{
  transform:translateY(-1px);
  border-color:#bed8ff !important;
  color:#173a72 !important;
  box-shadow:0 8px 18px -13px rgba(37,99,235,.65) !important;
}
.hb-tabbar [data-slot="tabs-trigger"]:hover svg{color:#2563eb !important}
.hb-tabbar [data-slot="tabs-trigger"]:active{transform:translateY(0) scale(.985)}
.hb-tabbar [data-slot="tabs-trigger"]:focus-visible{
  outline:2px solid rgba(59,130,246,.55) !important;
  outline-offset:2px !important;
}
.hb-tabbar [data-slot="tabs-trigger"][data-state="active"]{
  background:linear-gradient(135deg,#3b82f6 0%,#4f6df5 56%,#6d5efc 100%) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px -12px rgba(59,130,246,.95),inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.hb-tabbar [data-slot="tabs-trigger"][data-state="active"] svg{color:#ffffff !important}

/* ADB 画面：做成同一套里的「工具」按钮，描边蓝，跟标签区分 */
.hb-tabbar .hb-adb-btn{
  height:34px !important;
  padding:0 11px !important;
  gap:7px !important;
  border-radius:10px !important;
  border:1px solid #cfe1ff !important;
  background:linear-gradient(180deg,#f7fbff,#eef6ff) !important;
  color:#1d4ed8 !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  box-shadow:0 1px 2px rgba(37,99,235,.06) !important;
  transition:transform .16s cubic-bezier(.22,.8,.3,1),background .16s ease,border-color .16s ease,box-shadow .16s ease !important;
}
.hb-tabbar .hb-adb-btn svg{width:15px !important;height:15px !important;color:#2563eb !important}
.hb-tabbar .hb-adb-btn:hover{
  transform:translateY(-1px);
  border-color:#9fc4ff !important;
  box-shadow:0 8px 18px -13px rgba(37,99,235,.75) !important;
}
@media (prefers-reduced-motion:reduce){
  .hb-tabbar [data-slot="tabs-trigger"],.hb-tabbar .hb-adb-btn{transition:none !important}
}

/* 窄屏（<=1500）收紧一档，尽量保持单行工具条 */
@media (max-width:1500px){
  .hb-tabbar{gap:4px !important;padding:5px !important}
  .hb-tabbar [data-slot="tabs-trigger"],.hb-tabbar .hb-adb-btn{
    height:32px !important;padding:0 8px !important;gap:5px !important;font-size:12px !important;
  }
  .hb-tabbar [data-slot="tabs-trigger"] svg,.hb-tabbar .hb-adb-btn svg{width:14px !important;height:14px !important}
}

/* 「群发」面板打开态：用描边蓝，跟当前激活标签的实心蓝区分开，避免两个按钮同时像选中 */
.hb-tabbar [role="tab"].hb-bulk-tab-on{
  background:linear-gradient(180deg,#f2f8ff,#e6f1ff) !important;
  color:#1d4ed8 !important;
  border-color:#a9caff !important;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.16),0 6px 16px -13px rgba(37,99,235,.75) !important;
}
.hb-tabbar [role="tab"].hb-bulk-tab-on svg{color:#2563eb !important}