/* 标准维度页面布局模板 CSS */

/* 设置整个页面的背景色 */
body {
    background-color: #1e1e1e; /* 与内容区域一致的深灰色 */
    margin: 0; /* 重置默认 body margin */
    font-family: sans-serif; /* 设置一个基础字体 */
    color: #e0e0e0; /* 设置基础文字颜色 */
}

/* 变量定义 (可选，如果需要与 dimension_hub 共享变量) */
/* :root {
    --sidebar-width: 60px; 
} */

/* 容器整体样式 - 模仿 dimension_hub.css */
.dimension-hub-container {
    display: flex; /* 使用 flex 布局将侧边栏和主内容并排 */
    gap: 20px; /* 添加侧边栏和主内容之间的间距 */
    padding: 20px; /* 保持与 dimension_hub 一致的外边距 */
    box-sizing: border-box;
    /* 新增：统一设置维度页面背景色 */
    background-color: #454954;
}

/* 控制侧边栏在标准模板父容器中的布局 */
.dimension-hub-container > .floating-sidebar-container {
    /* 使用与 dimension_hub.css 中相同的视觉定位值 */
    margin-top: 23.5px;
    min-height: 575px;
    align-self: flex-start; /* 让其高度自适应，并顶部对齐父容器内容边缘 */
    /* width 和 flex-shrink 由 floating_sidebar.css 提供 */
}

/* 主内容区域容器 - 模仿 dimension_hub.css */
.dimension-hub-main-content {
    display: flex; /* 保持 Flex 布局 */
    flex-direction: column; /* 垂直排列内部元素 */
    align-items: stretch; /* 让子项默认拉伸填充 */
    flex-grow: 1; /* 占据剩余空间 */
    box-sizing: border-box; /* 包含 padding 和 border */
    min-width: 0; /* 防止内容溢出时被压缩 */
    position: relative; /* 保持相对定位，用于内部绝对定位 */
}

/* 删除：移除内容背景层样式 */
/*
.standard-layout-content-background {
    position: absolute;
    top: calc(22px + 60px * 2 + 2px); 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333; 
    border-radius: 0 0 8px 8px; 
    z-index: 1; 
}
*/

/* --- 恢复：维度头部区域样式 (使用绝对定位的横向布局) --- */

/* 修改：LOGO 不再绝对定位 */
#dimension-category-logo-container {
    /* position: absolute; */
    /* top: 25px; */
    /* left: 0; */
    z-index: 9;
    margin-left: 20px !important; /* 新增：左边距，整体右移 */
    margin-top: 23.5px !important; /* 修改：调整为23.5px以与悬浮条顶部对齐 */
    /* LOGO 内部样式由 dimension_category_logos.css 控制 */
    /* width: 290px; */ /* 移除：尝试设置一个固定宽度，接近下方文字宽度 */
    /* display: flex; */ /* 移除：使用flex布局使其内部LOGO居中 */
    /* justify-content: center; */ /* 移除：水平居中 */

    /* 强制设置我们期望的样式 */
    width: auto !important; /* 让宽度由内容决定或不设置固定宽度 */
    padding: 0 !important;   /* 移除任何不必要的内边距 */
    display: block !important; /* 与工作正常的"单位统计"页面行为一致 */
}

/* 新增：直接控制LOGO内部文字大小和容器内边距，以影响其占位 */
.dimension-logo { /* 类选择器，确保能选中LOGO内部的实际显示元素 */
    display: inline-block; /* 或者 block，取决于其设计 */
    /* padding: 5px 8px; */ /* 移除原有padding，由固定宽度和内部对齐控制 */
    background-color: #5a5a5a; /* 示例背景，便于观察 */
    border-radius: 3px;
    width: 42px; /* 用户要求：比原宽度(约52px)减少20% */
    height: auto; /* 高度自适应内容 */
    text-align: center; /* 文字居中 */
    overflow: hidden; /* 隐藏溢出文字 */
    vertical-align: middle; /* 尝试垂直居中，如果LOGO和名称不在一行则可能效果不明显 */
    box-sizing: border-box; /* 确保宽度包含padding/border (如果未来添加) */
}

.dimension-logo span {
    font-size: 20px; /* 用户要求：字号大一点 (原18px) */
    font-weight: bold; /* 用户要求：加粗 */
    color: white;
    display: inline-block; /* 确保transform作用正确 */
    line-height: 1.2; /* 轻微调整行高以适应容器 */
}

/* 修改：名称容器，位于 LOGO 下方 */
#dimension-name-container {
    position: absolute; /* 恢复：使用绝对定位 */
    top: 95px; /* 修改：从 85px 增加到 90px，使其下移 */
    left: 20px; /* 与LOGO的margin-left (20px) 对齐 */
    /* width: 180px; */ /* 移除：宽度将由JS动态设置 */
    height: 50px;       
    display: flex;      
    align-items: center; 
    justify-content: center;/* 保持：水平居中文本 */
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 40px; /* 恢复：回到标准的40px基准字号 */
    font-weight: bold;
    white-space: nowrap; /* 保持：防止意外换行 */
    /* letter-spacing: 7px; */ /* 由JS动态设置或被媒体查询覆盖 */
    z-index: 9;
    /* overflow 和 text-overflow 由JS缩放逻辑替代，不再需要 */
    line-height: 1; /* 辅助垂直居中和scrollHeight计算 */
}

/* 修改：描述容器，位于竖线右侧 */
#dimension-description-container {
    position: absolute; /* 保持绝对定位 */
    top: 17px; /* 修改：上移，使其内部文字顶部与分割线顶部对齐 */
    left: calc(20px + 180px + 10px + 8px + 7px); /* 修改：name_left(20) + name_width(180) + gap(10) = divider_left. divider_left + divider_width(8) + gap(7) */
    width: calc(100% - (20px + 180px + 10px + 8px + 7px) - (16 * 48px + 20px + 15px) - 20px); /* 修改：使用新的left值重新计算宽度 */
    height: 127px; /* 修改：微调高度，使其底部与分割线底部对齐 */
    color: #cccccc;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow: hidden; /* 修改：移除滚动条，隐藏溢出内容 */
    z-index: 9;
    /* display: flex; */        /* 修改：移除 flex display */
    /* align-items: flex-end; */ /* 修改：移除 flex align-items */
}

/* 修改：分隔线改为垂直线 */
#dimension-divider-line {
    position: absolute;
    top: 22px; /* 与翻牌器顶部对齐 */
    left: calc(20px + 180px + 10px); /* 修改：name_left(20px) + name_width(180px) + gap(10px) */
    width: 8px; /* 修改：线条加粗 */
    height: 122px; /* 恢复：恢复到原始高度 */
    background-color: #333;
    z-index: 8;
    border-radius: 2px;
}

/* --- 移除所有 .layout-vertical 相关规则 --- */

/* --- 翻牌器和内容区的定位可能需要根据新的头部区域调整 --- */

/* 标准维度页面内容容器样式 */
.standard-dimension-content-placeholder {
    /* 恢复基础样式 */
    /* padding: 20px; */ /* 删除: 移除统一的 padding */
    padding-top: 20px;    /* 新增: 上内边距 */
    padding-bottom: 20px; /* 新增: 下内边距 */
    padding-left: 20px;   /* 新增: 左内边距，对齐 LOGO */
    padding-right: 20px;  /* 新增: 右内边距，对齐翻牌器 */
    margin-top: calc(22px + 60px * 2 + 2px); /* 恢复上边距，确保内容从背景层开始 */
    color: #e0e0e0;
    width: 100%; 
    box-sizing: border-box; 
    position: relative; /* 保持相对定位，用于加载覆盖层 */
    z-index: 5; 
    /* padding-right: calc(16 * 48px + 20px); */ /* 删除: 移除计算的右内边距 */
}

/* 移除旧的 position: fixed 相关样式和媒体查询中的修改 */
/* .standard-dimension-top-area { ... } */
/* @media (max-width: 768px) { ... } */

/* --- 移除：顶部区域包装器样式 --- */
/* .standard-dimension-top-section { ... } */

/* --- 移除：矩阵区域样式 --- */
/* .standard-dimension-matrix-area { ... } */

/* --- 移除：顶部行容器样式 --- */
/* .standard-layout-top-row { ... } */

/* --- 移除：左侧填充区样式 --- */
/* .standard-layout-top-left-spacer { ... } */

/* --- 移除：翻牌器包装器样式 --- */
/* .standard-flipboard-wrapper { ... } */

/* --- 针对标准布局中新的翻牌器行容器的样式 --- */
.standard-flipboard-row {
    /* 恢复绝对定位 */
    position: absolute;
    right: 20px; /* 修改：定位到右侧，增加右边距，整体左移 */
    /* 移除 grid 布局 */
    /* display: grid; */
    grid-template-columns: repeat(16, 48px); /* 保留：用于计算宽度 */
    gap: 0px;
    width: calc(16 * 48px);
    height: 60px;
    background-color: #333; /* 设置背景色同牌面 */
    border-radius: 3px;
    /* margin-bottom: 2px; */ /* 绝对定位不需要 */
    z-index: 10; /* 确保在内容区和背景层上方 */
}

/* 单独为第一行添加上边距以调整垂直位置 */
#standard-flipboard-row1 {
    top: 22px; /* 使用 top 定位 */
}

/* 新增：为第二行设置 top 定位 */
#standard-flipboard-row2 {
    top: calc(22px + 60px + 2px); /* 第一行top + 第一行高 + 行间距 */
}

/* 调整翻牌器容器 - 在 Flex 列中靠右 */
.dimension-hub-container > .dimension-hub-main-content > .flipboard-container {
    width: fit-content; /* 保持：宽度自适应 Grid 内容 */
    /* 恢复：在主内容 Flex 列中靠右 */
    align-self: flex-end; /* 改回 flex-end */
    margin-bottom: 0; /* 保持：移除底部外边距 */
    background-color: transparent; /* 确保背景透明 */
    /* 让容器包裹其内容，Grid会在此容器内 */
}

/* 使用 CSS Grid 实现精确的列数和换行 */
.dimension-hub-container > .dimension-hub-main-content .flipboard-row {
    display: grid; /* 保持：使用 Grid 布局 */
    grid-template-columns: repeat(16, 48px); /* 保持：定义16列，每列48px宽 */
    gap: 0px; /* 保持：行和列间距均为0 */
    width: max-content; /* 新增：让网格宽度适应其16列内容 */
    /* 移除 justify-content 和旧的 width: fit-content */
}

/* 强制设置翻牌元素的尺寸、边框盒模型、溢出处理和内部对齐 */
.dimension-hub-container > .dimension-hub-main-content .flip-element {
    margin: 0 !important; /* 保持：移除外边距，增加 !important */
    width: 48px !important; /* 保持：强制设置统一宽度 */
    height: 60px !important; /* 保持：强制设置统一高度 (根据视觉调整) */
    box-sizing: border-box !important; /* 保持：确保padding/border包含在尺寸内 */
    overflow: hidden !important; /* 保持：隐藏内部溢出内容 */
    /* 移除强制 flex 布局和居中对齐，让 flipboard.css 控制内部 */
    /* display: flex !important; */
    /* align-items: center !important; */
    /* justify-content: center !important; */
    /* 覆盖 flipboard.css 可能存在的冲突样式 */
}

/* --- 移除：不再强制 text 容器为 flex 并居中 --- */
/*
.standard-flipboard-row .flip-element .upper-text,
.standard-flipboard-row .flip-element .lower-text {
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
}
*/

/* --- 修改：拆分为独立规则以分别控制上下部分 --- */

/* --- 强制设置上半部分文字样式 --- */
.standard-flipboard-row .flip-element .upper-text span {
    color: #fff !important;             /* 文字颜色 */
    width: 100%;                       /* 宽度 */
    font-size: 45px !important;         /* !!! 修改这里调整文字大小 !!! */
    font-family: Arial, sans-serif !important; /* 新增：覆盖字体 */
    /* 恢复：文字居中 */
    text-align: center !important;     /* 恢复居中 */
    /* 移除：不再需要内边距偏移 */
    /* padding-left: 10px !important; */

    /* !!! 修改这里调整上半部分文字的上下位置 !!! */
    line-height: 55px !important;      /* 例如: 20px (靠上), 60px (靠下), normal (居中) */
    
    /* 确保下半部分的 transform 不影响上半部分 */
    transform: none !important; 
}

/* --- 强制设置下半部分文字样式 --- */
.standard-flipboard-row .flip-element .lower-text span {
    color: #fff !important;             /* 文字颜色 */
    width: 100%;                       /* 宽度 */
    font-size: 45px !important;         /* !!! 修改这里调整文字大小 !!! */
    font-family: Arial, sans-serif !important; /* 新增：覆盖字体 */
    /* 恢复：文字居中 */
    text-align: center !important;     /* 恢复居中 */
    /* 移除：不再需要内边距偏移 */
    /* padding-left: 10px !important; */
    
    /* 确保上半部分的 line-height 不影响下半部分 */
    line-height: 25PX !important; 

    /* !!! 修改这里调整下半部分文字的上下位置 !!! */
    transform: translateY(-50%) !important; /* 例如: -50% (原始切割), -40% (靠下), -60% (靠上), none (居中) */
}

/* 新增：标准加载动画覆盖层样式 */
#loading-overlay {
    position: absolute; /* 相对于 .standard-dimension-content-placeholder 定位 */
    top: 0;
    left: 0;
    right: 0; /* 修改：使用 right 替代 width: 100% */
    /* width: 100%; */
    height: 70vh; /* 固定高度 */
    background-color: #454954; /* 与容器背景一致 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* 确保在内容之上 */
    opacity: 1;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    pointer-events: auto;
    visibility: visible;
    border-radius: 4px; /* 可选：与内容区保持一致 */
}

/* 新增：标准加载动画隐藏状态 */
.loading-overlay--hidden {
    opacity: 0;
    pointer-events: none; /* 隐藏时不可交互 */
    visibility: hidden;
}

/* --- 响应式调整页头 (新方案 v2) --- */
/* NEW Breakpoint for larger small screens */
@media (max-width: 1450px) {
    #dimension-category-logo-container {
        margin-left: 15px !important;
        transform: scale(0.9) !important;
        transform-origin: top left;
        /* max-width is not strictly needed for container if content scales, but good for safety */
    }
    #dimension-name-container {
        left: 15px; 
        font-size: 40px !important; /* Base: 50px */
        letter-spacing: 6px !important; /* Base: 10px */
        /* width: 200px !important; */ /* 移除：宽度将由JS动态设置 */
        top: 88px; 
    }
    #dimension-divider-line {
        /* Name left (15) + Name width (200) + gap (8) */
        left: calc(15px + 200px + 8px) !important;
    }
    #dimension-description-container {
        /* Divider left (223) + Divider width (8) + gap (6) */
        left: calc(15px + 200px + 8px + 8px + 6px) !important;
        /* Width: 100% - self_left - flipboard_space (approx 803px) - container_padding (20px) */
        width: calc(100% - (15px + 200px + 8px + 8px + 6px) - (16 * 48px + 20px + 15px) - 20px) !important;
        font-size: 12px !important; /* Base: 14px */
        line-height: 1.3 !important;
        overflow: hidden !important;
    }
}

@media (max-width: 1200px) {
    #dimension-category-logo-container {
        margin-left: 10px !important;
        transform: scale(0.8) !important; /* Previous: 0.85 */
        /* transform-origin: top left; */ /* Already set */
        /* max-width: calc(60px * 0.8) !important; */ /* Not strictly needed if content scales */
    }
    #dimension-name-container {
        left: 10px; 
        font-size: 30px !important; /* Previous: 30px is okay */
        letter-spacing: 3px !important; /* Previous: 3px is okay */
        /* width: 150px !important; */ /* 移除：宽度将由JS动态设置 */
        top: 88px; 
    }
    #dimension-divider-line {
        /* Name left (10) + Name width (150) + gap (5) */
        left: calc(10px + 150px + 5px) !important;
    }
    #dimension-description-container {
        /* Divider left (165) + Divider width (8) + gap (5) */
        left: calc(10px + 150px + 5px + 8px + 5px) !important;
        width: calc(100% - (10px + 150px + 5px + 8px + 5px) - (16 * 48px + 20px + 15px) - 20px) !important; /* Adjusted safety padding to 20px from 30px */
        font-size: 11px !important; 
        line-height: 1.25 !important; 
        overflow: hidden !important; 
    }
}

@media (max-width: 1024px) {
    #dimension-category-logo-container {
        margin-left: 8px !important;
        transform: scale(0.7) !important; 
    }
    #dimension-name-container {
        left: 8px; 
        font-size: 26px !important; /* Original: 32px */
        letter-spacing: 2px !important; /* Original: 3px */
        /* width: 120px !important; */ /* 移除：宽度将由JS动态设置 */
        top: 90px;
    }
    #dimension-divider-line {
        /* Name left (8) + Name width (120) + gap (4) */
        left: calc(8px + 120px + 4px) !important;
    }
    #dimension-description-container {
        /* Divider left (132) + Divider width (8) + gap (4) */
        left: calc(8px + 120px + 4px + 8px + 4px) !important;
        width: calc(100% - (8px + 120px + 4px + 8px + 4px) - (16 * 48px + 20px + 15px) - 15px) !important;
        font-size: 10px !important; 
        line-height: 1.2 !important; /* Adjusted */
        overflow: hidden !important;
    }
}

@media (max-width: 900px) {
    #dimension-category-logo-container {
        margin-left: 6px !important;
        transform: scale(0.6) !important; 
    }
    #dimension-name-container {
        left: 6px; 
        font-size: 22px !important; /* Original: 28px */
        letter-spacing: 1px !important; /* Original: 2px */
        /* width: 90px !important; */ /* 移除：宽度将由JS动态设置 */
        top: 92px;
    }
    #dimension-divider-line {
        /* Name left (6) + Name width (90) + gap (3) */
        left: calc(6px + 90px + 3px) !important;
    }
    #dimension-description-container {
        /* Divider left (99) + Divider width (8) + gap (3) */
        left: calc(6px + 90px + 3px + 8px + 3px) !important;
        width: calc(100% - (6px + 90px + 3px + 8px + 3px) - (16 * 48px + 20px + 15px) - 10px) !important;
        font-size: 9px !important; 
        line-height: 1.2 !important; /* Adjusted */
        overflow: hidden !important;
    }
}

@media (max-width: 768px) {
    #dimension-category-logo-container {
        margin-left: 5px !important;
        transform: scale(0.55) !important; 
    }
    #dimension-name-container {
        left: 5px; 
        font-size: 18px !important; /* Original: 22px */
        letter-spacing: 1px !important; 
        /* width: 70px !important; */  /* 移除：宽度将由JS动态设置 */
        top: 95px;
    }
    #dimension-divider-line {
        /* Name left (5) + Name width (70) + gap (2) */
        left: calc(5px + 70px + 2px) !important;
    }
    #dimension-description-container {
        /* Divider left (77) + Divider width (8) + gap (2) */
        left: calc(5px + 70px + 2px + 8px + 2px) !important;
        width: calc(100% - (5px + 70px + 2px + 8px + 2px) - (16 * 48px + 20px + 15px) - 5px) !important;
        font-size: 8px !important; 
        line-height: 1.15 !important; /* Adjusted */
        overflow: hidden !important;
    }
}

/* 移除之前尝试的换行方案的媒体查询 */
/* @media (max-width: 1100px) { ... } */