/* 文件用途：定义网站后台、登录页、查询页和弹窗的公共视觉样式。 */

/* =========================================================
   全局及公共基础配置 (全屏 App 布局核心)
   ========================================================= */
html, body {
    height: 100vh; /* 锁死一屏幕高 */
    margin: 0;
    padding: 0;
    overflow: hidden; /* 绝对禁止整个网页出现外层滚动条 */
    display: flex;
    flex-direction: column;
    background: #f1f3f8;
    color: #333;
    font-family: system-ui, sans-serif;
}

/* 登录页独立样式恢复正常 */
body.login-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: auto; /* 登录页允许滚动 */
}
.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
}
.login-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
}
.login-box input[type="text"],
.login-box input[type="password"] {
    display: block;
    height: 44px;
    line-height: 20px;
    overflow: hidden;
    contain: paint;
    vertical-align: middle;
}
.login-box button {
    width: 100%;
    padding: 12px;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* =========================================================
   ⭐ 看板核心布局 (从上到下按弹性盒子排布)
   ========================================================= */
.page-header {
    flex-shrink: 0; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px 15px 50px;
    color: white;
    text-align: center;
    z-index: 100;
}

.content-wrap {
    flex: 1; 
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    
    /* 👇 核心修复 1：强制锁死高度骨架，无视内部渲染进度 */
    min-height: 0;
    height: 100%; 
    
    max-width: 1920px;
    width: 100%;
    margin: -30px auto 0; 
    padding: 0 10px 20px 10px; 
    box-sizing: border-box;
    z-index: 105;
}

.card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    
    /* 👇 核心修复 2：斩断子元素对父级高度的影响 */
    min-height: 0;
    height: 100%; 
}

.sticky-top-block {
    flex-shrink: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    z-index: 90;
    border-bottom: 1px solid #f0f0f0;
}

#mainForm {
    order: 20;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    
    /* 👇 核心修复 3：确保表单层不会因为数据少而萎缩 */
    min-height: 0;
    height: 100%; 
}

.table-area {
    flex: 1;
    overflow-y: auto; 
    overflow-x: auto; 
    scrollbar-gutter: stable;
    background: #fff;
    
    /* 👇 核心修复 4：划定独立渲染区，把滚动条严格限制在此处 */
    min-height: 0;
    height: 100%; 
}

.pagination-bar {
    order: 30;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    min-height: 64px;
    box-sizing: border-box;
    gap: 12px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    border-radius: 0 0 12px 12px;
}

/* =========================================================
   工具栏与按钮组
   ========================================================= */
.toolbar {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 12px 12px 0 0;
}
.btn-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.btn {
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;          /* 👈 禁止选中按钮文字，避免连点/双击时出现“丨”文本光标 */
    -webkit-user-select: none;  /* 👈 兼容 Safari / 旧版 Chrome */
    -moz-user-select: none;     /* 👈 兼容火狐 */
    text-decoration: none;
    color: #666;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-cyan   { color: #08979c; border-color: #87e8de; background: #e6fffb; }
.btn-gray   { color: #555; border-color: #d9d9d9; background: #fafafa; }
.btn-purple { color: #722ed1; border-color: #d3adf7; background: #f9f0ff; }
.btn-dark   { color: #fff; border-color: #434343; background: #595959; }
.btn-red    { color: #ff4d4f; border-color: #ffa39e; background: #fff1f0; }
.btn-blue   { color: #1890ff; border-color: #91d5ff; background: #e6f7ff; }
.btn-green  { color: #52c41a; border-color: #b7eb8f; background: #f6ffed; }
.btn-orange { color: #fa8c16; border-color: #ffd591; background: #fff7e6; }
.btn-indigo { color: #1d39c4; border-color: #adc6ff; background: #f0f5ff; }

/* 待发货页复制状态：本机浏览器长期保留，视觉上只改变颜色。 */
.pending-copy-btn {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.pending-copy-btn.is-copied {
    color: #fff !important;
    background: #16a34a !important;
    border-color: #15803d !important;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .14);
}

/* 调色盘组件 */
.color-btn-wrap { position: relative; display: inline-block; }
.palette-popup {
    display: none; position: absolute; top: 100%; left: 0; background: #fff;
    border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.15); padding: 12px;
    z-index: 9999; margin-top: 8px; border: 1px solid #eee;
    grid-template-columns: repeat(8, 1fr); gap: 6px; width: 260px;
}
.palette-popup.show { display: grid; }
.color-swatch {
    width: 24px; height: 24px; border-radius: 4px; cursor: pointer;
    border: 1px solid rgba(0,0,0,0.08); transition: transform 0.1s;
}
.color-swatch:hover { transform: scale(1.15); z-index: 2; }
.color-swatch.clear-color { background: #fff; position: relative; }
.color-swatch.clear-color::after {
    content: ''; position: absolute; top: 11px; left: 2px; width: 20px;
    height: 2px; background: #ff4d4f; transform: rotate(45deg);
}

/* =========================================================
   顶部搜索与过滤区域
   ========================================================= */
.filter-section {
    padding: 15px;
    background: #fafafa;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.filter-item {
    flex: 1 1 130px;
    min-width: 130px;
    display: flex;
}
.filter-section select, 
.filter-section input[type="date"], 
.filter-section input[type="text"] { 
    width: 100%;
    height: 38px;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    padding: 0 10px;
    box-sizing: border-box;
    background: #fff;
    font-family: inherit;
    color: #333;
    transition: all 0.2s;
}
.filter-section input[type="text"] {
    line-height: 20px;
    overflow: hidden;
    contain: paint;
    vertical-align: middle;
}
.filter-section select:focus, 
.filter-section input:focus {
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
}
.date-range-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 2 1 240px;
    min-width: 240px;
}
.date-range-wrap input[type="date"] { flex: 1; padding: 0 5px; font-size: 12px; cursor: pointer; }
.search-box {
    display: flex; gap: 8px; flex: 2 1 240px; min-width: 240px; align-items: center;
}
.search-box .btn { height: 38px; padding: 0 18px; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; white-space: nowrap; font-size: 13px; }

/* =========================================================
   🚨 表格区域基础 (修复吸顶表头缝隙 Bug)
   ========================================================= */
table {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse !important; 
    table-layout: fixed;
    border: none !important;
} 

/* 表头独立吸顶 (增加双重保险，强行补齐消失的竖线) */
th {
    position: sticky;
    top: 0;
    z-index: 80;
    background: #f8fafc !important; 
    background-clip: padding-box; /* 🚨 修复缝隙保险1：限制背景色，防止它溢出遮挡边框 */
    padding: 10px 5px;
    text-align: center;
    font-size: 12px;
    color: #334155;
    border: 1px solid #cbd5e1 !important;
    border-bottom: 2px solid #000 !important;
    box-shadow: 0 2px 0 #000;
    outline: 1px solid #cbd5e1; /* 🚨 修复缝隙保险2：利用内发光轮廓线，强行画出被浏览器吃掉的竖线 */
    outline-offset: -1px;
}

/* 补齐表头最左和最右的最外侧粗黑竖线 (去掉outline防止和粗线打架) */
th:first-child { border-left: 2px solid #000 !important; outline: none; }
th:last-child { border-right: 2px solid #000 !important; outline: none; }

/* 补齐表头中“操作”列最左侧竖线 */
th.col-action { border-left: 2px solid #000 !important; outline: none; }

/* 后面的 tr 和 td 保持原样不用动... */

tr { transition: background-color 0.2s; }
td {
    padding: 8px 4px;
    font-size: 13px;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #cbd5e1;
    font-weight: 700;
    color: #000;
}
.col-profit { font-weight: 900 !important; color: #fa8c16; }

/* =========================================================
   🚨 为每个数据组绘制“独立直观的外框” (完美解决右侧缺失)
   ========================================================= */
tbody.draggable-group { transition: background-color 0.2s; cursor: pointer; }

/* 1. 上下黑边 */
tbody.draggable-group > tr:first-child > td { border-top: 2px solid #000 !important; }
tbody.draggable-group > tr:last-child > td { border-bottom: 2px solid #000 !important; }
tbody.draggable-group > tr > td[rowspan] { border-bottom: 2px solid #000 !important; }

/* 2. 左右最外侧粗黑线 (通过类名锁定，永不断线) */
tbody.draggable-group > tr > td.col-seq { border-left: 2px solid #000 !important; }

/* 修改前： */
/* tbody.draggable-group > tr > td.col-action { border-right: 2px solid #000 !important; } */

/* 修改后： */
tbody.draggable-group > tr > td.col-action { border-right: 1px solid #cbd5e1 !important; } /* 重置为普通的内部灰边线 */
tbody.draggable-group > tr > td.col-opdate { border-right: 2px solid #000 !important; } /* 赋予新列最右侧粗黑框 */
/* 3. 强制画出内侧竖线，完美框住【推送】按钮！ */
#sortableTable th.col-action,
#sortableTable td.col-action { 
    border-left: 1px solid #cbd5e1 !important; 
}
#sortableTable th.col-rel,
#sortableTable td.col-rel { 
    border-right: 1px solid #cbd5e1 !important; 
}

/* 4. 组内行与行之间的虚线 */
tbody.draggable-group > tr:not(:last-child) > td:not([rowspan]) { 
    border-bottom: 1px dashed #94a3b8 !important; 
}

/* === 悬停变色效果 === */
tbody.draggable-group:hover { background-color: #f8fafc; }
tbody.draggable-group:hover > tr:first-child > td { border-top-color: #3b82f6 !important; }
tbody.draggable-group:hover > tr:last-child > td { border-bottom-color: #3b82f6 !important; }
tbody.draggable-group:hover > tr > td[rowspan] { border-bottom-color: #3b82f6 !important; }
tbody.draggable-group:hover > tr > td.col-seq { border-left-color: #3b82f6 !important; }
tbody.draggable-group:hover > tr > td.col-action { border-right-color: #cbd5e1 !important; } /* 不变色 */
tbody.draggable-group:hover > tr > td.col-opdate { border-right-color: #3b82f6 !important; } /* 转移蓝边 */
/* === 选中变色效果 === */
tbody.group-selected { box-shadow: none !important; }
tbody.group-selected > tr > td { background-color: rgba(24, 144, 255, 0.12) !important; }
tbody.group-selected > tr:first-child > td { border-top-color: #1890ff !important; }
tbody.group-selected > tr:last-child > td { border-bottom-color: #1890ff !important; }
tbody.group-selected > tr > td[rowspan] { border-bottom-color: #1890ff !important; }
tbody.group-selected > tr > td.col-seq { border-left-color: #1890ff !important; }
tbody.group-selected > tr > td.col-action { border-right-color: rgba(24, 144, 255, 0.12) !important; }
tbody.group-selected > tr > td.col-opdate { border-right-color: #1890ff !important; }

/* 拖拽排序效果 (如果需要保留的话) */
body.shift-pressed { user-select: none; }
body.shift-pressed tbody.draggable-group { cursor: grab; }
body.shift-pressed tbody.draggable-group:active { cursor: grabbing; }
tbody.sortable-ghost { opacity: 0.4; }
tbody.sortable-ghost tr { background-color: #f0f5ff !important; }
tbody.sortable-drag { box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; background: #fff; z-index: 9999;}
/* =========================================================
   组件与标签样式
   ========================================================= */
.bank-tag { background: #edf2ff; color: #4c6ef5; padding: 2px 5px; border-radius: 4px; font-size: 11px; font-weight: bold; }
.status-tag { background: #f1f5f9; color: #475569; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; user-select: none; }
.sum-text { font-size: 13px; font-weight: 700; color: #000; }
.grid-input { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 700; color: #000; text-align: center; outline: none; padding: 6px 0; border-radius: 4px; line-height: 18px; overflow: hidden; contain: paint; box-sizing: border-box; vertical-align: middle; }
.grid-input:focus { background: #e6f7ff; box-shadow: inset 0 0 0 2px #1890ff; }
.rel-input { color: #1890ff; }
.remark-input { width: 100%; height: 34px; border: 2px solid #1890ff; border-radius: 4px; padding: 6px; font-size: 13px; line-height: 18px; font-weight: 700; color: #000; outline: none; box-sizing: border-box; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; overflow: hidden; contain: paint; vertical-align: middle; }
.empty-remark { color: #ccc; font-style: italic; font-size: 11px; font-weight: normal; }

/* =========================================================
   分页控制栏元素
   ========================================================= */
.page-controls { display: flex; flex-direction: row !important; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: nowrap; min-height: 34px; }
.page-btn { min-width: 52px; height: 34px; padding: 0 12px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 6px; text-decoration: none; color: #333; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.page-btn:hover { background: #f0f0f0; }
.page-btn.disabled { opacity: 0.5; pointer-events: none; }
.page-btn.active { background:#1890ff; border-color:#1890ff; color:#fff; font-weight:bold; }
.limit-select { width: 122px; height: 34px; box-sizing: border-box; padding: 0 8px; border-radius: 6px; border: 1px solid #ddd; font-size: 13px; outline: none; margin-right: 0; background:#fff; }

/* 匹配订单与主台账共用同一套固定骨架，切换状态时分页栏不会上下或左右跳动。 */
.zshl-table-area {
    order: 20;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-gutter: stable;
    background: #f8fafc;
}
.zshl-pagination-bar .page-controls { flex-wrap: nowrap; }

/* =========================================================
   全列宽分配
   ========================================================= */
/* =========================================================
   全列宽分配
   ========================================================= */
/* ================= 表格各列的宽度分配 ================= */
.col-seq      { width: 55px; } /* 序号列：固定宽度55像素（因为里面只有勾选框和两位数字，不需要随屏幕变宽） */
.col-date     { width: 6%; }   /* 日期列：占表格总宽度的 6% */
.col-sender   { width: 8%; }   /* 成员列（报单人）：占 8%，名字可能较长所以稍微宽一点 */
.col-name     { width: 4%; }   /* 姓名列（客户）：占 8% */
.col-last4    { width: 4%; }   /* 尾号列（手机尾号4位）：占 6% */
.col-bank     { width: 3%; }   /* 银行列：占 6% */
.col-status   { width: 5%; }   /* 状态列（已完成/待发货等）：占 6% */
.col-settle   { width: 5%; }   /* 结算状态列（已结算/未结算）：占 6% */

.col-remark   { width: 15%; padding: 4px; }   /* 官方备注列：占 8%（内边距 4px 让文字不贴边） */
.col-s-remark { width: 15%; padding: 4px; }  /* 成员备注列：占 10%（通常备注字数最多，分配最宽） */
.col-s-price  { width: 3%; }   /* 成员价列：占 6% */
.col-b-price  { width: 3%; }   /* 银行价列：占 6% */
.col-price    { width: 3%; }   /* 单价列：占 6% */
.col-diff     { width: 3%; }   /* 差价列：占 6% */
.col-profit   { width: 3%; font-size:14px !important; } /* 利润列：占 7%，且强制字体放大到14px，让利润更醒目 */
.col-track    { width: 135px; min-width: 135px; max-width: 135px; } /* 物流单号列固定宽度；单号本身仍保持单行显示 */

/* 🚚 每行左侧显示单号，右侧只显示一个删除符号 */
#sortableTable td.col-track { word-break: normal; overflow-wrap: normal; }
#sortableTable .track-line { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-width: 0; line-height: 1.5; text-align: left; box-sizing: border-box; }
#sortableTable .track-number { min-width: 0; flex: 1 1 auto; display: block; text-align: left; white-space: nowrap; word-break: normal; overflow-wrap: normal; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#sortableTable .track-remove-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #ef4444; font-size: 16px; line-height: 18px; font-weight: bold; cursor: pointer; }
#sortableTable .track-remove-btn:hover { background: #fee2e2; color: #b91c1c; }
#sortableTable .track-remove-btn:disabled { opacity: .45; cursor: wait; }
#sortableTable .track-line + .track-line {
    margin-top: 2px;
    padding-top: 2px;
    border-top: 1px dashed #e2e8f0;
}

.col-rel      { width: 8%; }   /* 关联ID列：占 9%（因为经常显示“组合_xxxxx”较长的字符） */
.col-action   { width: 8%; }  /* 操作列：占 12%（里面要横向放下发货、驳回、复制三个按钮，必须足够宽） */
.col-opdate   { width: 6%; }   /* 🌟 新增：分配操作日期列的宽度 */
/* ================= 按钮样式 ================= */
.btn-sm { 
    padding: 4px 8px;      /* 按钮内边距：上下4像素，左右8像素，让按钮变得“小巧紧凑” */
    font-size: 11px;       /* 字体大小：11像素（比正常字小一号） */
    margin: 2px;           /* 外边距：按钮与按钮之间隔开 2 像素，防止粘在一起 */
    display: inline-block; /* 显示方式：允许它们像文字一样并排显示在一行 */
}
/* 状态标签着色 */
.status-tag[data-status="已进件"] , 
.status-tag[data-status="待再查"] ,
.status-tag[data-status="待确认"] { background: #e0f2fe !important; color: #1e40af !important; border: 1px solid #bae6fd; }

.status-tag[data-status="已完成"] { background: #dcfce7 !important; color: #166534 !important; border: 1px solid #bbf7d0; }

.status-tag[data-status="已兑换"] { background: #f3e8ff !important; color: #6b21a8 !important; border: 1px solid #e9d5ff; }

.status-tag[data-status="已销卡"] { background: #7f1d1d !important; color: #ffffff !important; border: 1px solid #991b1b; }

.status-tag[data-status="待首刷"], 
.status-tag[data-status="待面签"], 
.status-tag[data-status="待激活"] { background: #fef08a !important; color: #854d0e !important; border: 1px solid #fde047; }

.status-tag[data-status="未通过"], 
.status-tag[data-status="已关闭"], 
.status-tag[data-status="非新户"], 
.status-tag[data-status="已超时"] { background: #fee2e2 !important; color: #991b1b !important; border: 1px solid #fecaca; }
.status-tag[data-status="已申请"] { background: #e2e8f0 !important; color: #475569 !important; border: 1px solid #cbd5e1; }
.status-select { width: 100%; min-width: 70px; padding: 4px; border: 2px solid #1890ff; border-radius: 4px; font-size: 12px; font-weight: bold; color: #333; outline: none; box-sizing: border-box; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; cursor: pointer; }
.status-select:focus { background: #e6f7ff; }


/* 结算状态专属标签着色 */
.status-tag[data-status="未结算"] { background: #e0f2fe !important; color: #1e40af !important; border: 1px solid #bae6fd; }
.status-tag[data-status="已结算"] { background: #f6ffed !important; color: #389e0d !important; border: 1px solid #b7eb8f; }
/* =========================================================
   超级管理员三击修改输入框样式 & 弹窗样式
   ========================================================= */
.inline-edit-input { width: 100%; min-width: 60px; height: 30px; padding: 4px; border: 2px solid #1890ff; border-radius: 4px; font-size: 13px; line-height: 18px; font-weight: bold; color: #333; outline: none; box-sizing: border-box; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: center; overflow: hidden; contain: paint; vertical-align: middle; }
.inline-edit-input:focus { background: #e6f7ff; }

.otp-mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 10000; align-items: center; justify-content: center; }
.otp-modal { background: #fff; padding: 30px; border-radius: 12px; width: 320px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); text-align: center; }
.otp-modal h3 { margin: 0 0 15px; color: #333; font-size: 18px; }
.otp-modal p { color: #666; font-size: 13px; margin-bottom: 20px; }
.otp-input { display: block; width: 100% !important; height: 54px !important; min-height: 54px; max-height: 54px; padding: 0 14px !important; letter-spacing: 8px; font-size: 24px !important; line-height: 50px !important; text-align: center; font-weight: bold; border: 2px solid #1890ff !important; border-radius: 8px; margin-bottom: 20px !important; box-sizing: border-box; overflow: hidden; contain: paint; vertical-align: middle; caret-color: #111; }
.btn-flex { display: flex; gap: 10px; }
.btn-flex button { flex: 1; padding: 10px; border-radius: 6px; cursor: pointer; border: none; }
.btn-cancel { background: #eee; color: #666; }
.btn-confirm { background: #1890ff; color: #fff; }

/* 隐藏数字输入框微调按钮 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* =========================================================
   日历插件优化：隐藏非本月的灰色多余日期
   ========================================================= */
.daterangepicker td.off, 
.daterangepicker td.off.in-range, 
.daterangepicker td.off.start-date, 
.daterangepicker td.off.end-date {
    visibility: hidden !important;
}
/* =========================================================
   修复日历插件被全局表格样式污染的问题，重新设计清爽表头
   ========================================================= */
.daterangepicker th {
    position: static !important; /* 取消吸顶 */
    background: #fff !important; /* 恢复纯白背景 */
    border: none !important; /* 清除黑框 */
    box-shadow: none !important; /* 清除阴影 */
    outline: none !important; /* 清除轮廓线 */
}

/* 专门重新设计“一、二、三...”这一排星期的样式 */
.daterangepicker thead tr:last-child th {
    border-bottom: 1px solid #eee !important; /* 加一条淡淡的下边线分割 */
    color: #888 !important; /* 字体颜色改用柔和的高级灰 */
    font-weight: normal !important; /* 取消粗体，更显精致 */
    font-size: 13px !important;
    padding-bottom: 10px !important; /* 稍微撑开一点距离 */
}

/* =========================================================
   商城订单专属样式
   ========================================================= */
.zshl-table { width: 100%; border-collapse: collapse; }
.zshl-table th { background: #f8fafc !important; color: #64748b; padding: 12px 15px; font-weight: bold; border-bottom: 2px solid #e2e8f0; text-align: left; }
.zshl-table td { padding: 12px 15px; vertical-align: middle; }
.zshl-tag { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; padding: 4px 8px; font-size: 12px; color: #475569; display: inline-block; }
.tag-highlight-bank {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    border: 1px solid #7dd3fc !important; color: #0284c7 !important;
    font-weight: bold !important; padding: 4px 10px !important;
    border-radius: 6px; display: inline-flex !important; 
    align-items: center; justify-content: flex-start;
    width: 133px !important; /* 👈 强制设定固定宽度，与前面标签对齐 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
    box-sizing: border-box;
}
/* 退款专用模态框追加 */
.refund-input-large { width: 100%; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; font-size:18px; font-weight:bold; color:#cf1322; outline: none; text-align:center;}
.refund-input-large:focus { border-color: #1890ff; box-shadow: 0 0 0 2px rgba(24,144,255,0.2); }
/* =========================================================
   商城订单专属样式 (补充)
   ========================================================= */
.zshl-tag-fixed { 
    display: inline-flex !important; 
    align-items: center; 
    vertical-align: middle; 
}
.zshl-tag-fixed span:last-child {
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
    flex: 1;
    text-align: left; /* 👈 覆盖全局 td 的居中，让姓名/手机/地址/推荐人/礼品的值靠左显示 */
}
.tag-width-name { width: 100px !important; }
.tag-width-phone { width: 140px !important; }
.tag-width-address { width: 390px !important; }
.tag-width-gift { width: 390px !important; }
.tag-width-referrer { width: 150px !important; }

/* 🎁 礼品悬浮图片专属样式 (修复列宽跳动 + 丝滑淡入) */
.gift-hover-container {
    overflow: visible !important; 
}
.gift-hover-container:hover {
    z-index: 99; 
}
.gift-hover-container .gift-hover-img {
    /* 核心修复：彻底弃用 display: none */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 防止在透明状态下误挡住下方的鼠标点击 */
    
    position: absolute;
    top: 100%; 
    margin-top: 8px; 
    left: 50%;
    transform: translateX(-50%) translateY(5px); /* 默认往下偏移一点点，用于动画 */
    width: 260px; 
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    z-index: 9999;
    border: 2px solid #fff;
    
    /* 增加 0.2 秒的丝滑上浮淡入过渡动画 */
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.gift-hover-container:hover .gift-hover-img {
    /* 鼠标悬浮时展现 */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0); /* 动画：轻微上浮归位 */
}