/*!
 * 订单列表「列表 / 卡片」视图切换
 * 纯 CSS 实现（radio + :checked），不依赖 JS；脚本只负责记忆上次选择
 * 列表模式：一行一单的表格（order-view-list-wrap）
 * 卡片模式：原有信息块外框卡片化（.orderTable + 卡片样式）
 */

/* 隐藏的切换开关（必须与 .order-viewbar / .order-view-list-wrap / .orderTable 同级） */
.order-view-radio {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* 切换栏 */
.order-viewbar {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.order-view-switch {
    display: inline-flex;
    background: #f5f7fb;
    border: 1px solid #e5ebf5;
    border-radius: 6px;
    overflow: hidden;
}

.order-view-switch label {
    display: block;
    min-width: 72px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 13px;
    color: #4b5b7a;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.order-view-switch label + label {
    border-left: 1px solid #e5ebf5;
}

#orderViewList:checked ~ .order-viewbar label[for="orderViewList"],
#orderViewCard:checked ~ .order-viewbar label[for="orderViewCard"] {
    background: #1e9fff;
    color: #fff;
}

/* 列表表格（国际版风格） */
.order-view-list-wrap {
    width: 100%;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.order-view-list-wrap .layui-table {
    min-width: 1500px;
    margin-bottom: 0;
}

.order-view-list-wrap .layui-table th,
.order-view-list-wrap .layui-table td {
    font-size: 13px;
}

.order-view-list-wrap .layui-table th:last-child,
.order-view-list-wrap .layui-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    background: #fff;
    box-shadow: -8px 0 12px rgba(31, 55, 88, 0.06);
}

.order-view-list-wrap .layui-table th:last-child {
    z-index: 3;
    background: linear-gradient(180deg, rgba(249, 251, 255, 1), rgba(243, 247, 255, 0.98));
}

.order-view-list-wrap .layui-table td {
    overflow: visible;
}

/* 桌面端的两种视图切换 */
@media screen and (min-width: 601px) {

    /* 默认（列表）：只显示表格 */
    .order-view-list-wrap {
        display: block;
    }

    #orderViewList:checked ~ .orderTable {
        display: none !important;
    }

    #orderViewCard:checked ~ .order-view-list-wrap {
        display: none;
    }

    /* ===== 卡片模式 ===== */

    /* 容器：淡蓝灰底，去掉横向最小宽度 */
    #orderViewCard:checked ~ .orderTable {
        display: flex !important;
        min-width: 0 !important;
        padding: 14px;
        border-radius: 12px;
        background: #f2f6fb;
    }

    /* 隐藏旧表头与占位行 */
    #orderViewCard:checked ~ .orderTable .meter,
    #orderViewCard:checked ~ .orderTable .btnGroup2 {
        display: none !important;
    }

    /* 一张订单一个卡片：订单信息 + 实名信息/按钮 + 客服备注 同属一张卡 */
    #orderViewCard:checked ~ .orderTable .order-card {
        width: 100%;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid #e6ecf6;
        border-radius: 10px;
        /* 不用阴影（大量卡片时阴影+圆角绘制很吃性能），悬停只改边框色 */
        box-shadow: none;
        /* 不能 overflow:hidden / contain:paint，否则"风控查看/更多"下拉菜单会被卡片边缘裁掉 */
        overflow: visible;
        transition: border-color .15s ease;
        /* 性能：布局/样式隔离，一张卡变化不牵动整页重排 */
        contain: layout style;
    }

    #orderViewCard:checked ~ .orderTable .order-card:hover {
        border-color: #cfe0fa;
        /* contain:layout 会让每张卡各自成为层叠上下文，下拉菜单伸到下一张卡上会被盖住；
           悬停时把当前卡整体提到最上层，保证"风控查看/更多"菜单完整可见 */
        position: relative;
        z-index: 30;
    }

    /* 卡片内部各块去掉自身卡片外观，只保留分隔线 */
    #orderViewCard:checked ~ .orderTable .order-card .dataContent {
        margin: 0 !important;
        width: 100%;
    }

    #orderViewCard:checked ~ .orderTable .order-card .dataContent + .dataContent {
        border-top: 1px solid #eef3f9;
    }

    #orderViewCard:checked ~ .orderTable .order-card .dataItems {
        min-height: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible;
    }

    /* 卡头：浅蓝灰底 + 细分隔线，元信息弱化 */
    #orderViewCard:checked ~ .orderTable .dataContent .dataItems .infoTitle {
        background: #f8fbff !important;
        border-bottom: 1px solid #e9eff8 !important;
        padding: 12px 16px !important;
        min-height: 0 !important;
        row-gap: 4px !important;
        align-items: center !important;
    }

    #orderViewCard:checked ~ .orderTable .infoTitle > div {
        font-size: 13px !important;
        color: #5f6f86 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 20px !important;
        padding: 1px 0 !important;
    }

    /* 卡头里的徽章跟着行高一起收紧 */
    #orderViewCard:checked ~ .orderTable .infoTitle .layui-badge {
        height: 18px !important;
        line-height: 18px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
        vertical-align: middle;
    }

    /* 「还未签署」提醒徽章：浅灰底 + 深灰字；尺寸与其他徽章完全一致，保证卡头一行放得下 */
    #orderViewCard:checked ~ .orderTable .infoTitle .sign-warn-badge {
        background-color: #d5dce5 !important;
        border: 1px solid #bfc9d5 !important;
        color: #4d5866 !important;
        font-weight: 600 !important;
    }

    /* 订单号突出 */
    #orderViewCard:checked ~ .orderTable .infoTitle > div:nth-child(2) {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #1f3758 !important;
    }

    /* 信息列之间加细竖线（用阴影，不占布局空间） */
    #orderViewCard:checked ~ .orderTable .infoContent .tableRow + .tableRow {
        box-shadow: -1px 0 0 0 #f0f4fa;
    }

    /* 金额：总租金加粗深色（统一黑色，不再用橙色突出） */
    #orderViewCard:checked ~ .orderTable .goodPrice .rentalMoney {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #222 !important;
    }

    #orderViewCard:checked ~ .orderTable .goodPrice .fenqi-money {
        font-size: 14px !important;
    }

    /* 已付金额：浅蓝色（与未扣款徽章同色系），保持醒目加粗 */
    #orderViewCard:checked ~ .orderTable .payNum .c-222 {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #5a9cf8 !important;
    }

    /* 图片区与信息区：列内容与上下分隔线、左右竖向分隔线都留出距离 */
    #orderViewCard:checked ~ .orderTable .infoContent .tableRow {
        padding: 14px 18px !important;
    }

    #orderViewCard:checked ~ .orderTable .infoContent .goodInfo {
        padding-left: 18px !important;
    }

    #orderViewCard:checked ~ .orderTable .infoContent .rentTime div,
    #orderViewCard:checked ~ .orderTable .infoContent .payNum div {
        line-height: 22px;
    }

    /* 租期列（开始/结束/分期数）已注释，隐藏空列避免留白 */
    #orderViewCard:checked ~ .orderTable .infoContent .rentTime {
        display: none !important;
    }

    #orderViewCard:checked ~ .orderTable .infoContent .payNum {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    /* 操作区：与信息区同一张白卡，只用细线分隔 */
    #orderViewCard:checked ~ .orderTable .btnGroup {
        background: #fff !important;
        border-top: 1px solid #eef3f9 !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock {
        padding: 12px 16px !important;
        border-bottom: 1px solid #f3f6fb !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock:last-child {
        border-bottom: none !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .info {
        line-height: 20px !important;
        font-size: 13px !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns {
        height: auto !important;
        margin-top: 8px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns .btn {
        border-radius: 4px !important;
        box-shadow: 0 1px 2px rgba(31, 55, 88, 0.08);
    }

    /* 按钮统一白底；悬停/点击浅蓝（!important 用于压过模板里的行内彩色背景）
       只作用在按钮行本身（直接子级 + 两个下拉的触发按钮），不改下拉菜单里各项的颜色 */
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .btn,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .layui-btn,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .order-mini-btn,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .btn {
        background: #fff !important;
        background-color: #fff !important;
        border: 1px solid #dfe6ef !important;
        color: #45526b !important;
        box-shadow: none !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .btn:hover,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .btn:active,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .layui-btn:hover,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .layui-btn:active,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .order-mini-btn:hover,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .order-mini-btn:active,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .btn:hover,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .btn:active {
        background: #e8f1ff !important;
        background-color: #e8f1ff !important;
        border-color: #bcd6ff !important;
        color: #1e6fff !important;
    }

    /* 风控查看触发钮：与「监管锁管理」一致的蓝底白字（layui-btn-normal 同色） */
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .risk-menu-toggle {
        background: #1e9fff !important;
        background-color: #1e9fff !important;
        border: 1px solid #1e9fff !important;
        color: #fff !important;
    }

    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .risk-menu-toggle:hover,
    #orderViewCard:checked ~ .orderTable .btnGroup .topBlock .btns > .order-more-actions > .risk-menu-toggle:active {
        background: #0f8bef !important;
        background-color: #0f8bef !important;
        border-color: #0f8bef !important;
        color: #fff !important;
    }

    /* 客服备注：紧凑化，输入框不再占满整行 */
    #orderViewCard:checked ~ .orderTable .noticeInfo {
        display: flex !important;
        align-items: center !important;
        padding: 12px 16px !important;
        border-top: 1px solid #eef3f9 !important;
        border-bottom: none !important;
        background: #fff !important;
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    #orderViewCard:checked ~ .orderTable .noticeInfo .kf-remark-editor {
        width: 100% !important;
        gap: 8px;
    }

    #orderViewCard:checked ~ .orderTable .noticeInfo .kf-remark-input {
        width: 360px !important;
        min-width: 200px !important;
        max-width: calc(100% - 150px) !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 4px 8px !important;
        line-height: 18px !important;
        font-size: 13px !important;
        color: #555 !important;
        background: #fff !important;
        border: 1px solid #e6dede !important;
        border-radius: 4px !important;
        resize: vertical !important;
    }

    #orderViewCard:checked ~ .orderTable .noticeInfo .kf-remark-editor.is-editing .kf-remark-input {
        border-color: #1e9fff !important;
    }

    #orderViewCard:checked ~ .orderTable .noticeInfo .kf-remark-btn {
        height: 28px !important;
        padding: 0 12px !important;
        line-height: 26px !important;
        font-size: 12px !important;
        border-radius: 4px !important;
    }
}

/* 「更多」下拉（纯 CSS 悬停展开，不依赖 JS） */
.order-view-list-wrap .dropdown-wrap {
    position: relative;
    display: inline-block;
}

/* 按钮 → 菜单之间的透明过渡桥：鼠标移过空隙时不断开 hover，菜单不消失 */
.order-view-list-wrap .dropdown-wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -4px;
    right: -4px;
    height: 6px;
}

/* 向上展开的菜单（最后两行）：桥放在按钮上方 */
.order-view-list-wrap tr:nth-last-child(-n+2) .dropdown-wrap::after {
    top: auto;
    bottom: 100%;
}

.order-view-list-wrap .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: auto;
    min-width: 180px;
    padding: 6px 0;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 55, 88, 0.13);
    z-index: 9999;
    scrollbar-width: thin;
}

.order-view-list-wrap .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.order-view-list-wrap .dropdown-menu::-webkit-scrollbar-thumb {
    background: #d5ddea;
    border-radius: 3px;
}

/* 操作列在最右侧，菜单改为左向对齐，避免溢出视口 */
.order-view-list-wrap td:last-child .dropdown-menu {
    left: auto;
    right: 0;
}

.order-view-list-wrap .dropdown-wrap:hover > .dropdown-menu {
    display: block;
}

/* 浮层打开时，隐藏行内菜单，避免重复 */
.order-view-list-wrap .dropdown-wrap.is-portal-open > .dropdown-menu {
    display: none !important;
}

/* 渲染在 body 上的浮层菜单：不受表格/卡片容器裁剪 */
.order-view-dropdown-portal {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 180px;
    padding: 6px 0;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #e6ebf3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 55, 88, 0.13);
    z-index: 999999;
    scrollbar-width: thin;
}

.order-view-dropdown-portal::-webkit-scrollbar {
    width: 6px;
}

.order-view-dropdown-portal::-webkit-scrollbar-thumb {
    background: #d5ddea;
    border-radius: 3px;
}

.order-view-dropdown-portal a {
    display: block;
    padding: 7px 14px;
    color: #41506b;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.order-view-dropdown-portal a:hover {
    background: #f2f7ff;
    color: #1e9fff;
}

.order-view-list-wrap .dropdown-menu a {
    display: block;
    padding: 7px 14px;
    color: #41506b;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    cursor: pointer;
}

.order-view-list-wrap .dropdown-menu a:hover {
    background: #f2f7ff;
    color: #1e9fff;
}

/* 操作列直接展示的按钮（对齐现有后台按钮风格） */
.order-view-list-wrap .cell-btn {
    display: inline-block;
    margin-right: 8px;
    padding: 0 10px;
    height: 28px;
    line-height: 26px;
    border: 1px solid #d9e2f0;
    border-radius: 4px;
    background: #fff;
    color: #41506b;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: border-color .15s, color .15s, background .15s;
}

.order-view-list-wrap .cell-btn:hover {
    border-color: #1e9fff;
    color: #1e9fff;
    background: #f5faff;
}

/* 下拉触发按钮统一加小三角 */
.order-view-list-wrap .dropdown-wrap > .cell-btn::after,
.order-view-list-wrap .dropdown-wrap > .layui-badge::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px solid currentColor;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
}

.order-view-list-wrap .cell-btn:focus,
.order-view-list-wrap .dropdown-wrap > .layui-badge:focus {
    outline: none;
}

.order-view-list-wrap .cell-btn.is-warm {
    background: #1e9fff;
    border-color: #1e9fff;
    color: #fff;
}

.order-view-list-wrap .cell-btn.is-warm:hover {
    background: #0f8bef;
    border-color: #0f8bef;
    color: #fff;
}

/* 风控查看：浅蓝描边，和主按钮区分但不跳色 */
.order-view-list-wrap .cell-btn.is-risk {
    background: #f5faff;
    border-color: #bfd8f5;
    color: #1e9fff;
}

.order-view-list-wrap .cell-btn.is-risk:hover {
    background: #e8f3ff;
    border-color: #1e9fff;
    color: #1e9fff;
}

/* 电子合同：绿色描边，悬停填充 */
.order-view-list-wrap .cell-btn.is-green {
    background: #fff;
    border-color: #7fd0a5;
    color: #08b553;
}

.order-view-list-wrap .cell-btn.is-green:hover {
    background: #08b553;
    border-color: #08b553;
    color: #fff;
}

/* 悬停行提升操作列层级，避免被下方行的 sticky 操作列覆盖 */
.order-view-list-wrap tr:hover > td:last-child {
    z-index: 100 !important;
}

/* 最后两行的菜单向上展开，避免被滚动容器底部裁剪 */
.order-view-list-wrap tr:nth-last-child(-n+2) .dropdown-menu {
    top: auto;
    bottom: 100%;
}

/* 移动端：使用自带的移动卡片列表，隐藏切换栏与桌面表格 */
@media screen and (max-width: 600px) {
    .order-viewbar,
    .order-view-list-wrap {
        display: none !important;
    }

    .orderTable {
        display: none !important;
    }
}


/* 「未扣款」徽章：浅蓝底深蓝字，和「已扣款」(绿)区分开，也不像黄色那么扎眼 */
.pay-pending-badge {
    background-color: #e8f1ff !important;
    border: 1px solid #c6dcff !important;
    color: #2f7bff !important;
    font-weight: 600 !important;
}

/* 「平台发起买断」徽章：与「风控查看」按钮同款蓝 */
.buyout-badge {
    background-color: #1e9fff !important;
    border: 1px solid #1e9fff !important;
    color: #fff !important;
}

/* 取消订单列里的红色/橙色按钮（取消订单、已逾期、不签约代扣等）统一成白底浅描边，悬停浅蓝 */
.tradStatus .layui-btn {
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #dfe6ef !important;
    color: #45526b !important;
    box-shadow: none !important;
}

.tradStatus .layui-btn:hover,
.tradStatus .layui-btn:active {
    background: #e8f1ff !important;
    background-color: #e8f1ff !important;
    border-color: #bcd6ff !important;
    color: #1e6fff !important;
}

/* 渠道来源（微信/支付宝/H5/京东）与在途订单数量：浅蓝描边小标签 */
.channel-badge {
    display: inline-block;
    height: 20px;
    line-height: 18px;
    padding: 0 8px;
    border: 1px solid #91caff;
    border-radius: 3px;
    background: #e6f4ff;
    color: #1677ff;
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
    white-space: nowrap;
}


/* 押金列顶部：新增监管锁 / 监管锁管理 统一用蓝字链接，右侧配轻红提示标 */
.cashPledge .sign-lock-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 30;
    line-height: 20px;
}

.cashPledge .sign-lock-box .sign-lock-btn {
    display: inline-block;
    height: auto;
    line-height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1e6fff !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease;
}

.cashPledge .sign-lock-box .sign-lock-btn:hover {
    color: #0f8bef !important;
    text-decoration: underline;
    background: transparent;
}

/* 原始下拉菜单只作为浮层数据源，卡片内不显示（浮层渲染在 body 上，不会被卡片裁掉） */
.cashPledge .sign-lock-box .dropdown-menu {
    display: none !important;
}

.cashPledge .sign-lock-box .sign-lock-tag {
    display: inline-block;
    height: 20px;
    line-height: 18px;
    padding: 0 8px;
    border: 1px solid #f6c9c9;
    border-radius: 3px;
    background: #fdeeee;
    color: #e14242;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* 商品备注：有内容时加粗深色；空值(--)自动沿用编号/套餐那几行的灰色常规字 */
.infoContent .goodInfo .cell-box .commodity_sku.remark-line.remark-has {
    color: #222;
    font-weight: 700;
}

/* ===== 蓝字文本按钮（同「新增监管锁」）：尺寸沿用原按钮，仅去掉边框改蓝字 ===== */
a.plain-blue-link,
a.plain-blue-link:focus {
    background: #fff !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #1e6fff !important;
    font-size: 14px !important;
    font-weight: 500;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left;
    white-space: nowrap;
}

a.plain-blue-link:hover,
a.plain-blue-link:active {
    background: #fff !important;
    border-color: transparent !important;
    color: #0f8bef !important;
    text-decoration: underline;
}
/* 行内蓝字（如「平台发起买断」）：字号跟随所在行文字，不放大 */
a.plain-blue-link.plain-blue-link-inherit {
    font-size: inherit !important;
}
/* ===== 列宽微调：租金金额列加宽，监管锁列收窄 ===== */
#orderViewCard:checked ~ .orderTable .goodPrice { width: 13% !important; }
#orderViewCard:checked ~ .orderTable .cashPledge { width: 14% !important; }
/* ===== 状态列按钮纵向间距收紧（原来每个按钮下方留 20px，显得很散） ===== */
#orderViewCard:checked ~ .orderTable .tradStatus > p {
    margin-bottom: 6px !important;
}

#orderViewCard:checked ~ .orderTable .tradStatus > p:last-child {
    margin-bottom: 0 !important;
}

#orderViewCard:checked ~ .orderTable .tradStatus > div {
    margin-bottom: 6px !important;
}