/* 降档挽留（新）—— 页面外壳、吸顶、业务标签色、自渲染内容样式 */

html,
body {
    height: 100%;
    margin: 0;
    /* 禁掉到顶/到底后的整页弹性拖动（overscroll 橡皮筋），
       触摸板和触摸屏往下拖时整个页面不再被拽离原位再弹回 */
    overscroll-behavior-y: none;
}

body {
    background: #dae1e6;
    color: #333333;
    font: 13px/1.5 -apple-system, "Microsoft YaHei", Arial, sans-serif;
}

.main {
    min-height: 100%;
    padding: 0 8px 8px;
    box-sizing: border-box;
}

/* 模块卡片外壳：内容区里的一块白底卡片 */
.coreInfoCard {
    border: 0;
    border-bottom: 1px solid #eaedf2;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

/* coreInfoFixed=1：页面内容滚动时核心信息吸顶。
   外层包一层背景，吸顶后顶部 8px 空隙不会透出滚动内容。 */
.coreInfoStickyWrap.isFixed {
    position: sticky;
    top: 0;
    z-index: 20;
    padding-top: 8px;
    background: #dae1e6;
}

/* 吸顶有两种：只核心信息，或核心信息 + 导航条一起。
   阴影统一挂 sticky 容器：两种情况下都只在外层底部出一层，不在中间叠阴影。 */
.coreInfoStickyWrap.isFixed.isStuck {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: box-shadow .2s ease;
}

/* 判断是否已经吸顶的哨兵 */
.coreInfoStickySentinel {
    height: 1px;
    margin-bottom: -1px;
}

/* 首屏加载 / 出错 / 入场被拦 */
.coreInfoLoading,
.coreInfoError,
.coreInfoBlocked {
    margin: 0;
    padding: 16px;
    font-size: 13px;
    color: #666666;
}

.coreInfoError {
    color: #f65a56;
}

/* TOP3 App 标签颜色；基础 pill 样式在 core.css 的 .coreInfoTagItem */
.coreInfoTagItem.isTop1 {
    background: #d9eff9;
    color: #0085d0;
}

.coreInfoTagItem.isTop2 {
    background: #fff5d6;
    color: #b58f00;
}

.coreInfoTagItem.isTop3 {
    background: #ffe6e4;
    color: #f65a56;
}

/* 客户标签：白底 + 红字 + 浅边框 */
.coreInfoTagItem.isLabel {
    border: 1px solid #d5dce6;
    background: #ffffff;
    color: #f65a56;
}

/* 环节区：和核心信息、导航条连成同一块白底，中间不留间距 */
.sceneStepBarRegion {
    background: #fff;
}

.sceneStepsRegion {
    position: relative;
    padding: 0 16px 45vh;
    background: #fff;
    border-radius: 0 0 4px 4px;
}

/* 底部余量说明：最后一个环节要能滚到吸顶区下沿，文档高度必须比
   「目标位置 + 视口高度」更长，否则滚动被钳在最大值、环节贴不上去 */

/* 环节之间不再画分隔线和左侧时间线，靠标题条本身分区 */
.sceneStepsRegion .stepBox {
    position: relative;
    padding: 12px 0 0;
    border-bottom: 0;
}

.sceneStepsRegion .stepBox:last-child {
    padding-bottom: 12px;
}

/* 左侧时间线：细竖线 + 状态圆点，圆点带白色描边，避免和标题底色糊在一起 */
.sceneStepsRegion .stepBox::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 1px;
    background: #dbe7f0;
}

.sceneStepsRegion .stepBox:first-child::before {
    top: 32px;
}

.sceneStepsRegion .stepBox:last-child::before {
    top: 0;
    bottom: auto;
    height: 32px;
}

.sceneStepsRegion .stepBox:only-child::before {
    display: none;
}

/* 竖线跟环节状态整段变色：失败红、进行中蓝、中止橙，成功保持浅色。
   整条卡片高度的线都属于这个环节，不做半截渐变。 */
.sceneStepsRegion .stepBox[data-step-status="error"]::before {
    background: #f65a56;
}

.sceneStepsRegion .stepBox[data-step-status="loading"]::before {
    background: #5fb3e0;
}

.sceneStepsRegion .stepBox[data-step-status="stopped"]::before {
    background: #f0b56d;
}

.sceneStepsRegion .stepBox::after {
    content: '';
    position: absolute;
    /* 竖线 left:-8 + width:2 → 中心 -7；圆点 left:-12 + width:10 → 中心也是 -7 */
    left: -12px;
    top: 27px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #c5cdd8;
    box-shadow: 0 0 0 3px #ffffff;
}

.sceneStepsRegion .stepBox[data-step-status="done"]::after {
    background: #90c31f;
}

.sceneStepsRegion .stepBox[data-step-status="loading"]::after {
    background: #0085d0;
    animation: stepDotPulse 1.2s ease-in-out infinite;
}

.sceneStepsRegion .stepBox[data-step-status="error"]::after {
    background: #f65a56;
}

.sceneStepsRegion .stepBox[data-step-status="stopped"]::after {
    background: #f38900;
}

@keyframes stepDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 0 rgba(0, 133, 208, .24); }
    50% { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(0, 133, 208, .10); }
}

.sceneStepsRegion .stepHead {
    padding: 9px 12px;
    border-radius: 4px;
    background: #e9f4fa;
}

.sceneStepsRegion .stepHead .title {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
}

.sceneStepsRegion .stepBody {
    padding: 8px 12px 0;
}

/* 自渲染示例：营销政策推荐 */
.policyRecommend {
    padding: 2px 0 4px;
}

.policySummary {
    margin: 0 0 8px;
    padding: 8px 10px;
    border-left: 3px solid #0085d0;
    border-radius: 0 4px 4px 0;
    background: #fafafa;
    color: #333333;
    font-size: 13px;
    line-height: 20px;
}

.policyLevel {
    display: inline-block;
    min-width: 34px;
    padding: 0 6px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    background: #ecf1f4;
    color: #666666;
}

.policyLevel.isPrimary {
    background: #d9eff9;
    color: #0085d0;
}

.policyLevel.isSecondary {
    background: #fff5d6;
    color: #b58f00;
}

.policyLevel.isFallback {
    background: #f2f2f2;
    color: #666666;
}

/* 环节口径：解释口径 / 处理意见 / 引导口径，来自 omniCaliberManage 的只读配置 */
.stepCaliber {
    margin-top: 8px;
}

/* 引导口径配成 top 时，放在标题下方、正文上方 */
.sceneStepsRegion .stepExtraTop:not(:empty) {
    margin-bottom: 8px;
}

.sceneStepsRegion .stepExtraTop .stepCaliber {
    margin-top: 0;
}

.stepCaliber .caliberBlock {
    margin-top: 8px;
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
}

/* 解释口径按浙江 sxBox 的蓝底，处理意见暖橙，引导口径绿色，三块拉开区分 */
.stepCaliber .caliberBlock.isExplain {
    background: #f5faff;
}

.stepCaliber .caliberBlock.isSuggest {
    background: #fff2e6;
}

.stepCaliber .caliberBlock.isGuide {
    background: #f8ffe7;
}

/* 小标题标签：72×26 切角造型（左上直角、右下 45° 切角），配色同浙江标签图
   （解释口径 #0082ef / 处理意见 #ff8500 / 引导口径 #80c600），CSS 矢量绘制，高分屏不发虚 */
.stepCaliber .caliberLabel {
    display: block;
    width: 72px;
    height: 26px;
    margin: 0;
    padding: 0;
    background: #0082ef;
    clip-path: polygon(0 0, 72px 0, 72px 17px, 63px 26px, 0 26px);
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    line-height: 26px;
    text-align: center;
}

.stepCaliber .caliberBlock.isSuggest .caliberLabel {
    background: #ff8500;
}

.stepCaliber .caliberBlock.isGuide .caliberLabel {
    background: #80c600;
}

.stepCaliber .caliberBody {
    padding: 6px 10px 8px;
    font-size: 13px;
    line-height: 20px;
    color: #333333;
}

.stepCaliber .caliberBody p {
    margin: 0;
}

.stepCaliber .caliberBody ul,
.stepCaliber .caliberBody ol {
    margin: 4px 0;
    padding-left: 18px;
}

.stepCaliber .caliberOption {
    margin: 0 0 6px;
    font-size: 12px;
    color: #0085d0;
}

/* 工单查询：搜索条件 + 工单表 */
.orderCheck {
    padding-top: 2px;
}

.orderFilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}

.orderFilterItem {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.orderFilterLabel {
    margin-right: 8px;
    font-size: 13px;
    color: #666666;
    white-space: nowrap;
}

.orderFilterSelect {
    width: 150px;
}

.orderStatus {
    display: inline-block;
    padding: 0 6px;
    border-radius: 9px;
    background: #fafafa;
    color: #666666;
    font-size: 12px;
    line-height: 18px;
}

.orderStatus.isProcessing {
    background: #fff5d6;
    color: #b58f00;
}

.orderStatus.isDone {
    background: #edf5db;
    color: #5a8a00;
}

/* 底部按钮 fixed 底栏的补偿：页面内容不被底栏盖住 */
.sceneRoot {
    padding-bottom: 60px;
}

/* 弹框选节点（陕西小白模式的节点单选） */
.nodePickBox {
    padding: 4px 2px 0;
}

.nodePickTip {
    margin: 0 0 8px;
    font-size: 13px;
    color: #666666;
}

.nodePickList .snChoiceGroup {
    padding: 0;
}