/* zc-index-tabs.css - extracted from _index.jsp inline <style> (B-stack #maintabs tab beautification) */
/* Depends on vendor/theme/theme-switcher.css CSS variables (--bg-primary / --accent etc.) */


/* 控制区域背景 */
#control {
    background: var(--bg-primary) !important;
}

/* 标签页容器背景 */
#maintabs {
    background: var(--bg-primary) !important;
}

/* 标签页头部样式 */
.tabs-header {
    background: var(--tab-header-gradient) !important;
    border-bottom: 1px solid var(--border-glow) !important;
    border-top: none !important;
    padding-right: 80px !important;
}

.tabs-header .tabs-wrap {
    background: transparent !important;
}

/* 标签页内部样式 */
.tabs .tabs-header .tabs-wrap .tabs-inner {
    height: 36px !important;
    line-height: 36px !important;
    /* 仅保留左内边距；右侧留白统一由 .tabs-title 的 padding-right 控制（与 JS 管理的元素一致） */
    padding: 0 0 0 22px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Noto Sans SC', sans-serif !important;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    border-bottom: 2px solid transparent !important;
}

/* 标签页悬停效果 */
.tabs .tabs-header .tabs-wrap .tabs-inner:hover {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* 选中标签页样式 */
.tabs .tabs-header .tabs-wrap .tabs-selected .tabs-inner {
    background: transparent !important;
    color: var(--accent) !important;
    border-bottom: 2px solid var(--accent) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px var(--border-glow);
}

/* 直接用 span 自身类名匹配（与 temp 真实 DOM 一致）；
   覆盖 EasyUI JS 内联写死的 padding-right（默认 1个工具*12 + 8 = 20px，仅够原始 12px 按钮；
   我们的刷新(16px)+关闭(18px)需要更大空间，否则文字压住刷新按钮）。
   56px 使文字右缘落在刷新按钮(约[32,48])左侧约 8px 处，消除重叠 */
.tabs-title.tabs-closable {
    color: inherit !important;
    font-size: 13px !important;
    padding-right: 44px !important;
}

.tabs .tabs-header .tabs-wrap .tabs-selected .tabs-inner .tabs-title {
    color: var(--accent) !important;
}

/* 隐藏标签页图标 */
.tabs .tabs-header .tabs-wrap .tabs-inner .tabs-icon {
    display: none !important;
}

/* 标签页滚动按钮样式 */
.tabs .tabs-scroller-left,
.tabs .tabs-scroller-right {
    background: var(--bg-hover) !important;
    border: none !important;
    color: var(--text-secondary) !important;
    width: 28px !important;
    transition: all 0.25s ease;
}

.tabs .tabs-scroller-left:hover,
.tabs .tabs-scroller-right:hover {
    background: var(--border-glow) !important;
    color: var(--accent) !important;
}

/* 标签页工具栏样式 */
.tabs .tabs-header .tabs-tool {
    background: transparent !important;
    border: none !important;
    border-left: 1px solid var(--border-divider) !important;
    padding: 0 8px !important;
}

.tabs .tabs-header .tabs-tool a {
    background: var(--bg-selected) !important;
    border: 1px solid var(--border-glow) !important;
    border-radius: 6px !important;
    color: var(--text-secondary) !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
    margin: 0 !important;
    transition: all 0.25s ease;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
    font-family: 'Noto Sans SC', sans-serif !important;
}

.tabs .tabs-header .tabs-tool a:hover {
    background: var(--bg-selected) !important;
    border-color: var(--border-glow) !important;
    color: var(--accent) !important;
}

.tabs .tabs-header .tabs-tool a .l-btn-text {
    color: inherit !important;
    font-size: 12px !important;
}

.tabs .tabs-header .tabs-tool a .l-btn-icon-left .l-btn-text {
    color: inherit !important;
}

/* 标签页关闭按钮样式 */
.tabs li a.tabs-close {
    opacity: 1 !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 50% !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.75);
    font-size: 0 !important;
    background: var(--close-btn-bg) !important;
    border: 1px solid var(--close-btn-border) !important;
    position: absolute !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* 关闭按钮 X 形状 */
.tabs li a.tabs-close::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--close-btn-line);
    transform: translate(-50%, -50%) rotate(45deg);
    transition: all 0.3s ease;
}

.tabs li a.tabs-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--close-btn-line);
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: all 0.3s ease;
}

/* 关闭按钮悬停效果 */
.tabs li:hover a.tabs-close {
    transform: translateY(-50%) scale(1);
    background: var(--close-btn-hover-bg) !important;
    border-color: var(--close-btn-hover-border) !important;
}

.tabs li:hover a.tabs-close::before,
.tabs li:hover a.tabs-close::after {
    background: var(--accent-red);
}

.tabs li a.tabs-close:hover {
    transform: translateY(-50%) scale(1.15) !important;
    background: var(--close-btn-hover-bg) !important;
    border-color: var(--close-btn-hover-border) !important;
    box-shadow: var(--close-btn-hover-shadow) !important;
}

.tabs li a.tabs-close:hover::before,
.tabs li a.tabs-close:hover::after {
    background: var(--close-btn-hover-line);
}

/* 选中标签页的关闭按钮样式 */
.tabs .tabs-selected a.tabs-close {
    background: var(--close-btn-selected-bg) !important;
    border-color: var(--close-btn-selected-border) !important;
    transform: translateY(-50%) scale(1);
}

.tabs .tabs-selected a.tabs-close::before,
.tabs .tabs-selected a.tabs-close::after {
    background: var(--close-btn-selected-line);
}

.tabs .tabs-selected:hover a.tabs-close {
    background: var(--close-btn-hover-bg) !important;
    border-color: var(--close-btn-hover-border) !important;
}

.tabs .tabs-selected:hover a.tabs-close::before,
.tabs .tabs-selected:hover a.tabs-close::after {
    background: var(--accent-red);
}

/* 标签页面板样式 */
.tabs-panels {
    background: var(--bg-primary) !important;
    border: none !important;
}

.tabs-panels .panel {
    background: var(--bg-primary) !important;
    border: none !important;
}

.tabs-panels .panel-body {
    background: var(--bg-primary) !important;
    border: none !important;
    padding: 0 !important;
}

.tabs-panels .panel-body iframe {
    background: var(--bg-primary);
}

/* 面板工具按钮样式 */
.panel-tool a {
    color: var(--text-dim) !important;
    transition: color 0.2s ease;
}

.panel-tool a:hover {
    color: var(--accent) !important;
}

.panel-tool-close {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center center !important;
}

.panel-tool-close:hover {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f5576c' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center center !important;
}

/* 刷新按钮定位（temp 真实 DOM：.tabs-p-tool > a.ext-icon-arrow_rotate_clockwise）；
   right:32px 使「关闭↔刷新」间距约 8px（较原 18px 减半），刷新左缘[48]与文字右缘[56]留出 8px 间隙 */
.tabs-p-tool {
    right: 32px;
    margin-top: -8.5px;
    height: 16px;
}

/* 刷新按钮图标本身尺寸与居中 */
.tabs-p-tool a {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    opacity: 0.7;
    transition: all 0.25s ease;
}

.tabs-p-tool a:hover {
    opacity: 1;
}

.tabs {
    border-style: none;
}