/*!
 * web/assets/css/index/11-index-tabs.css
 * 2026-09-09：index 端顶部标签页 + 右键菜单（与 admin 端一致的"双端统一布局"）
 */

/* ===== 顶部标签栏 ===== */
.admin-tabs-bar{
  display:flex;
  align-items:center;
  gap:4px;
  padding:6px 12px;
  background:var(--cd, #f7f8fa);
  border-bottom:1px solid var(--bd, #e5e7eb);
  overflow-x:auto;
  overflow-y:hidden;
  flex-shrink:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:transparent transparent;
  position:sticky;
  top:0;
  z-index:50;
}
.admin-tabs-bar::-webkit-scrollbar{height:4px;}
.admin-tabs-bar:hover::-webkit-scrollbar{background:rgba(0,0,0,.04);}
.admin-tabs-bar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:2px;}
/* 右侧渐隐提示：还有更多 tab 可滚动查看 */
.admin-tabs-bar::after{
  content:'';
  position:sticky;
  right:0;top:0;bottom:0;
  width:28px;flex:none;
  background:linear-gradient(to right,rgba(247,248,250,0),var(--cd,#f7f8fa) 80%);
  pointer-events:none;
}
html.dark .admin-tabs-bar::after{background:linear-gradient(to right,rgba(31,41,55,0),#1f2937 80%);}
.admin-tab{
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 12px;
  font-size:13px;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
  flex-shrink:0;
  transition:all .15s ease;
  color:var(--ts, #666);
  background:var(--cb, #fff);
  border:1px solid transparent;
  user-select:none;
  -webkit-user-select:none;
}
.admin-tab:hover{
  color:var(--tc, #111);
  background:var(--cd, #f0f1f3);
}
.admin-tab.active{
  color:var(--pci, #409eff);
  background:var(--cd, #ecf5ff);
  border-color:var(--pc, #409eff);
}
.tab-close{
  font-size:12px;
  opacity:.5;
  transition:opacity .15s;
}
.tab-close:hover{
  opacity:1;
  color:var(--dc, #f56c6c);
}
html.dark .admin-tabs-bar{background:#1f2937;border-color:#374151;}
html.dark .admin-tab{background:#111827;color:#9ca3af;}
html.dark .admin-tab:hover{background:#374151;color:#e5e7eb;}
html.dark .admin-tab.active{background:#1e3a5f;color:#60a5fa;border-color:#60a5fa;}

/* ===== 标签右键菜单（与 admin 13-tab-context 一致） ===== */
.tab-context-menu{
  position:fixed;
  /* 右键菜单必须浮在当前弹层之上才点得到（写死 3000 会被弹层计数器越过，#162） */
  z-index:calc(var(--gp-ztop,2000) + 20);
  min-width:160px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:var(--cd, #fff);
  border:1px solid var(--bd, #e5e7eb);
  border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  font-size:13px;
  user-select:none;
  -webkit-user-select:none;
}
.tab-context-menu li{
  padding:8px 16px;
  cursor:pointer;
  line-height:1.4;
  color:var(--tc, #111);
  transition:background .12s;
}
.tab-context-menu li:hover{
  background:rgba(64,158,255,.08);
  color:var(--pci, #409eff);
}
.tab-context-menu li.disabled{
  color:var(--ts, #999);
  cursor:not-allowed;
  pointer-events:none;
  opacity:.6;
}
html.dark .tab-context-menu{background:#1f2937;border-color:#374151;}
html.dark .tab-context-menu li{color:#e5e7eb;}
html.dark .tab-context-menu li:hover{background:rgba(96,165,250,.15);color:#60a5fa;}
html.dark .tab-context-menu li.disabled{color:#6b7280;}

/* ===== 路由切换骨架屏（与 admin 一致） ===== */
.page-skeleton{padding:8px 0;}
.page-skeleton .el-skeleton__item{
  background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.12) 37%,rgba(0,0,0,.06) 63%);
  background-size:400% 100%;
}
html.dark .page-skeleton .el-skeleton__item{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 37%,rgba(255,255,255,.06) 63%);
  background-size:400% 100%;
}
.page-skeleton{animation:skeletonFade .35s ease;}
@keyframes skeletonFade{from{opacity:0}to{opacity:1}}

/* ===== 路由进度条（顶部，CSS 动画，不遮挡内容） ===== */
.route-progress{
  position:fixed;
  top:0;left:0;
  height:3px;
  width:100%;
  background:linear-gradient(90deg,transparent,var(--pc,#409eff),transparent);
  background-size:50% 100%;
  background-repeat:no-repeat;
  animation:routeProgress 1s linear infinite;
  /* 路由进度条是页面级 chrome 且 pointer-events:none：压在弹层之下即可（写死 9999 会被弹层计数器越过，#162） */
  z-index:1900;
  pointer-events:none;
}
@keyframes routeProgress{
  0%{background-position:-50% 0;}
  100%{background-position:150% 0;}
}
html.dark .route-progress{background:linear-gradient(90deg,transparent,#60a5fa,transparent);background-size:50% 100%;background-repeat:no-repeat;}

/* ===== 2026-09-09：tab 溢出只滚 tab 栏，页面不横向撑开 ===== */
html,body{overflow-x:hidden;}
#gp-app .app{max-width:100%;}
.admin-tabs-bar{max-width:100%;box-sizing:border-box;}
@media (hover:hover) and (pointer:fine){
  .admin-tabs-bar{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) rgba(0,0,0,.04);}
}