/* ==========================================================================
   天赋树系统 - 全局筛选控件样式
   (位于高级筛选模态框中)
   ========================================================================== */

/* 全局天赋设置区域的包裹容器 */
.global-talent-settings-wrapper .filter-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.7rem;
}

/* 优先级和法力节点的标签 */
.global-talent-settings-wrapper .filter-item label {
    width: 140px;
    min-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    margin-right: 0.5rem;
}

/* 天赋优先级下拉选择器 */
#default-talent-strategy-select {
    flex-grow: 1;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--md-sys-color-outline);
    font-size: 0.9em;
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-background);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-align-last: center;
    height: 37px;
}

#default-talent-strategy-select:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 2px var(--md-sys-color-primary-container);
    outline: none;
}

/* 法力节点复选框的自定义样式 */
.checkbox-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.checkbox-container input[type="checkbox"] {
    display: none;
    /* 隐藏原始复选框 */
}

/* 模拟按钮样式的标签 */
.checkbox-container .checkbox-label {
    flex-grow: 1;
    background-color: var(--md-sys-color-surface-variant);
    color: var(--md-sys-color-on-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    padding: 8px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.9em;
    text-align: center;
    user-select: none;
    height: 37px;
    line-height: 19px;
    box-sizing: border-box;
}

.checkbox-container input[type="checkbox"]:checked+.checkbox-label {
    background-color: var(--md-sys-color-primary-container);
    border-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary-container);
    font-weight: bold;
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.4);
}


/* ==========================================================================
   英雄详情页 - 天赋系统容器和设置样式
   ========================================================================== */

/* 天赋系统总容器 */
#modal-talent-system-wrapper {
    background-color: var(--md-sys-color-surface-variant);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
}

/* 突破天赋设置区域的包裹容器 */
.modal-talent-settings-wrapper {
    margin-bottom: 1.5rem;
}

/* 2x2 网格布局 */
.modal-talent-settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.modal-talent-settings-grid .details-selector-item label {
    text-align: left;
    margin-bottom: 6px;
}

.modal-talent-settings-grid .details-selector-item select {
    width: 100%;
}

/* 详情页中的法力复选框容器 */
.modal-talent-settings-grid .checkbox-container {
    height: 100%;
}

.modal-talent-settings-grid .checkbox-label {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
}

/* 天赋树的滚动容器 */
#modal-talent-tree-wrapper {
    position: relative;
    max-height: 60vh;
    /* 限制最大高度 */
    overflow-y: auto;
    /* 垂直滚动 */
    overflow-x: hidden;
    /* 隐藏水平滚动条 */
    padding: 20px 0;
    background-color: var(--md-sys-color-surface);
    border-radius: 8px;
    border: 1px solid var(--md-sys-color-outline);
}


/* ==========================================================================
   天赋树视觉样式
   ========================================================================== */

.talent-tree {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    /* 为最后一个节点留出空间 */
}

.talent-tree-level {
    display: flex;
    justify-content: center;
    margin: 5px 0;
    min-height: 60px;
    /* var(--node-size) */
    align-items: center;
    width: 180px;
    /* 给予足够的宽度以容纳两个节点和间距 */
}

.node-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
}

.talent-node {
    --node-size: 60px;
    width: var(--node-size);
    height: var(--node-size);
    position: relative;
    z-index: 2;
    user-select: none;
    cursor: pointer;
    transition: filter 0.3s, box-shadow 0.3s;
    /* 未激活时变灰变暗 */
    filter: grayscale(85%) brightness(0.8);
    /* 消除移动端点击时的高亮框 */
    -webkit-tap-highlight-color: transparent;
}

/* 最终天赋节点不可点击 */
#node-26_1 {
    cursor: default;
}

/* 激活或可选节点的样式 */
.talent-node.selected {
    filter: grayscale(0%) brightness(1);
}

.talent-node.selected {
    transform: scale(1.05);
    /* 选中时轻微放大 */
}

/* 节点中的图像层 */
.talent-node img {
    position: absolute;
    object-fit: contain;
    pointer-events: none;
    /* 让点击事件穿透图像 */
}

.node-img-base,
.node-img-overlay,
.node-img-final-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.node-img-base {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.node-img-overlay {
    width: 45%;
    height: 45%;
    z-index: 2;
}

.node-img-plus {
    width: 20%;
    height: 20%;
    top: 40%;
    right: 20%;
    z-index: 3;
}

.node-img-final-border {
    width: 80%;
    height: 80%;
    z-index: 4;
}

/* 节点上的数值文本样式 */
.node-value {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255, 0, 221);
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.7);
    z-index: 5;
    pointer-events: none;
}

/* 连接线样式 */
.connector {
    position: absolute;
    background-color: var(--md-sys-color-outline);
    opacity: 0.5;
    z-index: 1;
}

.connector.active {
    background-color: var(--md-sys-color-primary);
    opacity: 1;
    box-shadow: 0 0 5px var(--md-sys-color-primary);
}


/* ==========================================================================
   响应式设计
   ========================================================================== */
@media (max-width: 768px) {

    /* 在移动端，天赋设置网格变为单列 */
    .modal-talent-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .talent-node {
        --node-size: 50px;
        /* 在小屏幕上缩小节点尺寸 */
    }

    .talent-tree-level {
        min-height: 50px;
    }

    .node-value {
        font-size: 12px;
    }
}

/* ==========================================================================
   新增：模态框内通用折叠内容样式
   ========================================================================== */
#modal-talent-settings-content.collapsed,
#modal-talent-tree-wrapper.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
    border-width: 0;
    opacity: 0;
}

/* ==========================================================================
       新增：详情页内标题居中样式
       ========================================================================== */

#modal-talent-settings-header,
#modal-talent-tree-header,
#modal-bonus-cost-header {
    /* <--- 添加新ID */
    position: relative;
    justify-content: center;
}

#modal-talent-settings-header .toggle-button,
#modal-talent-tree-header .toggle-button,
#modal-bonus-cost-header .toggle-button {
    /* <--- 添加新ID */
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   新增：天赋加成与消耗显示区域样式
   ========================================================================== */

#modal-bonus-cost-content .divider {
    border: none;
    border-top: 1px dashed var(--md-sys-color-outline);
    margin: 1rem 0;
}

#modal-talent-bonus-display,
#modal-talent-cost-display {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1rem;
    padding: 0.5rem;
}

.bonus-item,
.cost-item {
    background-color: var(--md-sys-color-surface);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.95em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bonus-item span,
.cost-item span {
    font-weight: bold;
    color: var(--md-sys-color-primary);
    margin-left: 1rem;
    font-size: 1.1em;
}

/* ==========================================================================
   新增：消耗栏目图标样式
   ========================================================================== */

.cost-item {
    /* 修正对齐方式 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 从左到右排列 */
}

.cost-icon {
    width: 1.5em;
    /* 图标宽度 */
    height: 1.5em;
    /* 图标高度 */
    margin-right: 0.5em;
    /* 图标与右侧文字的间距 */
    object-fit: contain;
}

.cost-item span {
    margin-left: auto;
    /* 将数值推到最右侧 */
}
/* ==========================================================================
   新增：属性加成栏目图标样式
   ========================================================================== */

.bonus-item {
    /* 修正对齐方式 */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 从左到右排列 */
}

.bonus-icon {
    width: 1.5em;
    /* 图标宽度 */
    height: 1.5em;
    /* 图标高度 */
    margin-right: 0.5em;
    /* 图标与右侧文字的间距 */
    object-fit: contain;
}

.bonus-item span {
    margin-left: auto;
    /* 将数值推到最右侧 */
}
/* ==========================================================================
   新增：为禁用的自定义复选框按钮添加样式
   ========================================================================== */

.checkbox-container input[type="checkbox"]:disabled+.checkbox-label {
    background-color: var(--md-sys-color-surface-variant);
    /* 恢复到中性背景色 */
    color: var(--md-sys-color-outline);
    /* 文字颜色变灰，以示禁用 */
    cursor: not-allowed;
    /* 鼠标悬浮时显示禁止图标 */
    opacity: 0.6;
    /* 整体变淡 */
    box-shadow: none;
    /* 移除可能存在的辉光效果 */
    pointer-events: none;
    /* 禁用所有鼠标事件，如悬浮效果 */
}