/* ============================================================
   SaaS后台管理风格——2026-08-30新增，参考客户提供的一张同类工具截图
   做的风格练习(左侧导航栏+顶部工具徽标+紫色主色调)，文案/结构/数据都是
   我们自己系统本来的，不是照抄对方页面。2026-08-30起三个页面
   (index.html佳成物流/quickfort.html速丰捷运/jcexcustom.html佳成定制)
   都换成了这套风格，作为正式版本使用，三个页面共用同一份主色调(统一
   品牌紫)，侧边栏里当前所在渠道展开显示、另外两条渠道收起成普通链接。
   这个主题因为要加左侧导航栏，跟之前几个"只加一层CSS"的主题不一样，
   三个html的DOM结构都做了调整(加了.app-shell/.app-sidebar外层包裹)，
   但所有原有功能元素的id/class/data-tab都原样保留，app.js/quickfort.js/
   jcexcustom.js完全不用改，逻辑零改动(每次替换前都用脚本核对过新旧
   版本id完全一致)——标签按钮从原来横排的.tabs工具条挪进了侧边栏，JS
   只认id/class/data-tab，不管这些按钮实际长在DOM哪个位置，一样正常
   工作。
   ============================================================ */
:root {
  --primary: #7c3aed;
  --primary-dark: #5b21b6;
  --primary-light: #ece5fc;
  --success: #16a34a;
  --success-light: #e6f7ec;
  --danger: #e11d48;
  --danger-light: #fde6ea;
  --warning: #f59e0b;
  --warning-light: #fdf0d8;
  --info: #2563eb;
  --info-light: #e6eefd;
  --accent: #9333ea;
  --accent-light: #f2e8fd;
  --pending: #db2777;
  --pending-light: #fbe4ee;
  --text: #1c2233;
  --text-muted: #7d8598;
  --border: #ebe9f5;
  --bg-page: #f6f5fb;
  --radius: 10px;
  --sidebar-w: 250px;
}

.portal-scope-hidden { display: none !important; }

body { background: var(--bg-page); }

/* ---------- 登录页：2026-09-02改成左右分栏大卡片(见style.css)后，阴影/
   圆角统一由外层.auth-card一个人管，.auth-box(现在只是卡片右半边的白色
   表单区)不再需要自己单独一份阴影/圆角，不然会跟外层的卡片阴影叠在一起
   显得很怪。这条规则原来是给旧版"居中悬浮小卡片"配色用的，改版后交给
   style.css的.auth-card统一处理，这里留空规则占位，方便以后想再调配色
   知道该改哪。 */

/* ---------- 整体外壳：左侧边栏 + 右边主区域 ---------- */
/* 给底部固定的合规警告留出空间，避免最后一行表格被遮住。 */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; padding-bottom: 60px; }

.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.4;
  padding: 6px 10px 20px;
  color: var(--text);
}
.app-brand-icon {
  width: 28px;
  height: 28px;
  flex: none;
}
.sidebar-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.sidebar-link:hover { background: var(--primary-light); }

.sidebar-group { margin-top: 4px; }
.sidebar-group-title {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(120deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.30);
  white-space: nowrap;
}
/* 原来.tabs工具条里的按钮，挪进侧边栏后当垂直导航项用——原有class/id/
   data-tab/事件绑定完全不动，这里只是改视觉：横排pill变成侧边栏里的
   竖排小项。 */
.app-sidebar .tab-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 14px 8px 28px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  position: static;
  top: auto;
}
.app-sidebar .tab-btn:hover { background: var(--primary-light); color: var(--primary); }
.app-sidebar .tab-btn.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  border-bottom: none;
}
/* 桌面端：当前渠道标题下面展开内部标签。链接用 href 固定顺序；
   当前标题和内部标签用元素上的 style="order:N"（各页面/服务端写入），
   不靠 :has()——display:contents 里 :has 会看不到渠道链接，邮政/小猪
   会被当成佳成，整块跑到第二位。 */
@media (min-width: 861px) {
  .sidebar-channels { display: contents; }
  .app-sidebar a.sidebar-link[href="index.html"] { order: 10; }
  .app-sidebar a.sidebar-link[href="jcexmapping.html"] { order: 10; }
  .app-sidebar a.sidebar-link[href="quickfort.html"] { order: 20; }
  .app-sidebar a.sidebar-link[href="jetspeed.html"] { order: 22; }
  .app-sidebar a.sidebar-link[href="jcexcustom.html"] { order: 30; }
  /* 三套佳成定制各自占用独立的一级/二级排序区间：旧通道30/31，
     新通道32/33，第三通道34/35。链接也必须写死 order，否则未激活时
     默认 order:0，会整块跑到侧栏最上方，看起来标签在跳来跳去。 */
  .app-sidebar a.sidebar-link[href="jcexcustom-new.html"] { order: 32; }
  .app-sidebar a.sidebar-link[href="jcexcustom-3.html"] { order: 34; }
  .app-sidebar a.sidebar-link[href="jcexcustom-4.html"] { order: 36; }
  .app-sidebar a.sidebar-link[href="postalcustom-us.html"] { order: 40; }
  .app-sidebar a.sidebar-link[href="postalcustom-us-2.html"] { order: 45; }
  .app-sidebar a.sidebar-link[href="postalcustom-global.html"] { order: 50; }
  .app-sidebar a.sidebar-link[href="xiaozhucustom.html"] { order: 60; }
  .app-sidebar a.sidebar-link[href="walmartstore.html"] { order: 70; }
}

/* 沃尔玛店铺管理：内测免费漂浮角标（标签页上漂一下，不挡点击） */
.walmart-beta-tab,
.app-sidebar a.sidebar-link[href="walmartstore.html"],
.channel-switcher a.channel-switcher-btn[href="walmartstore.html"] {
  position: relative;
}
.walmart-beta-tab::after,
.app-sidebar a.sidebar-link[href="walmartstore.html"]::after,
.channel-switcher a.channel-switcher-btn[href="walmartstore.html"]::after {
  content: "内测免费";
  position: absolute;
  top: -9px;
  right: -8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4f, #ff7a45);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.4px;
  box-shadow: 0 4px 10px rgba(255, 77, 79, 0.35);
  white-space: nowrap;
  pointer-events: none;
  animation: walmartBetaFloat 2.4s ease-in-out infinite;
  z-index: 2;
}
.walmart-beta-float {
  position: fixed;
  right: 22px;
  bottom: 86px;
  z-index: 80;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4d4f, #ff7a45);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 10px 24px rgba(255, 77, 79, 0.38);
  animation: walmartBetaFloat 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes walmartBetaFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.app-sidebar a.sidebar-link[href="walmartstore.html"],
.app-sidebar .sidebar-group-title.walmart-beta-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  line-height: 1.25;
}
.app-sidebar .walmart-tab-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text-muted);
  white-space: nowrap;
}
.app-sidebar .walmart-beta-tab .walmart-tab-hint {
  color: rgba(255, 255, 255, 0.88);
}

/* 这5个按钮的文字是quickfort.js的updateSignoffTabCounts每次整段
   textContent重写(带最新数量)，直接把图标写进HTML里会被下一次刷新冲掉，
   改用::before伪元素加图标——伪元素不属于textContent，不受JS覆盖影响，
   图标能一直稳定显示。 */
#tabAllStatusBtn::before { content: "📋 "; }
#tabInTransitBtn::before { content: "🚚 "; }
#tabEligibleBtn::before { content: "✅ "; }
#tabSignedBtn::before { content: "📗 "; }
#tabCarrierDeliveredBtn::before { content: "📦 "; }
#tabLostBtn::before { content: "⚠️ "; }
/* 佳成物流(index.html)独有的标签，没有tabLostBtn，用的是tabPendingSignoffBtn。 */
#tabPendingSignoffBtn::before { content: "📮 "; }

/* ---------- 右侧主区域 ---------- */
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.app-topbar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 12px 22px;
}
.app-topbar .topbar-item.balance {
  background: var(--primary-light);
  color: var(--primary);
}
.app-topbar .btn-outline {
  border-radius: 999px;
}

.app-content { padding: 18px 22px; overflow-y: auto; }

/* 渠道提示横幅：呼应参考截图里那条"Qtrack渠道提示"浅紫色圆角提示条 */
.channel-banner {
  text-align: left;
  background: var(--info-light) !important;
  color: var(--text) !important;
  border: 1px solid var(--info-light);
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* 表格表头：改成深色，呼应参考截图 */
thead th {
  background: #232842;
  color: #b9beda;
}

.toolbar, .search-row {
  background: #fff;
  border-radius: var(--radius);
}
.toolbar select, .search-row select, .pagination-row select,
.toolbar input[type="date"], .toolbar input.time-part, .search-row textarea {
  border-radius: 8px;
  background: #faf9ff;
}

/* 提交时间区间：原来8个独立输入框(年月日x2+时分秒x2)散在工具条里，
   现在包一层圆角边框容器，看起来像参考截图里那种"一个日期区间选择器"，
   内部各个input本身去掉自己的边框，让它们看起来是同一个控件的一部分。 */
.date-range-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #faf9ff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 14px;
  height: 40px;
}
.date-range-icon { color: var(--text-muted); font-size: 14px; margin-right: 4px; }
.date-range-field input[type="date"] {
  border: none;
  background: none;
  padding: 0;
  width: 132px;
  font-size: 13px;
  color: var(--text);
}
.date-range-field input[type="date"]:focus { outline: none; }
.date-range-field input.time-part {
  border: none;
  background: none;
  padding: 0;
  width: 34px;
  font-size: 13px;
}
.date-range-field input.time-part:focus { outline: none; }
.date-range-field .time-sep { color: var(--text-muted); margin: 0; }
.date-range-field .range-sep { color: var(--text-muted); margin: 0 10px; font-size: 12px; }

.btn { border-radius: 8px; }
.btn-primary { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.30), 0 2px 0 var(--primary-dark); }
.table-wrap { border-radius: var(--radius); }
tbody tr.row-selected { background: var(--primary-light); }
tbody tr:hover { background: #faf8ff; }

/* 2026-08-30客户要求："清空缓存重新加载"这个是排查问题用的工具按钮，
   不想让普通客户一眼看到、当成日常功能天天点(整表全量重拉，账号订单多
   的话会比较慢，没必要频繁触发)。挪出工具条正常的flex排版流(position:
   fixed不占位置，不会在.toolbar里空出一个洞)，放到页面右下角，做成
   不起眼的小灰字、没有按钮的边框/底色，不仔细找根本注意不到，但功能
   还在，我们自己知道去哪点就行。 */
#hardResyncBtn {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 40;
  background: none;
  border: none;
  box-shadow: none;
  color: #cfd3de;
  font-size: 11px;
  padding: 2px 6px;
}
#hardResyncBtn:hover { color: var(--text-muted); background: none; }

/* 手机/窄屏兜底：侧边栏收起变横条，避免小屏幕下把内容区挤没。
   2026-09-04客户明确要求两行分开："第一行是3大渠道按钮，第二行是订单
   等(当前渠道的状态标签)"——不能拿一整条横向滚动条把渠道入口和状态
   标签混一起(划走了才能看到另一个渠道，容易划过去找不着)。HTML那边
   (index/quickfort/jcexcustom.html)配合把原来挤在同一个.sidebar-group
   里的渠道标题(.sidebar-group-title)挪出来，跟另外两条渠道的链接
   (.sidebar-link)放进新的.sidebar-channels包裹层单独成一组，这样CSS
   只要让.sidebar-channels和.sidebar-group分别变成两条独立的横向行
   就行，不用borrow display:contents/伪元素强制换行这类更绕的技巧。
   "导入并提交订单"这个tab手机端用不上(客户明确说不需要)，按钮直接
   display:none隐藏；对应地app.js/quickfort.js/jcexcustom.js的
   applyMobileDefaultTab()会在检测到手机端还停留在这个被隐藏的tab时，
   自动切到"全部"状态页，不会让手机用户打开就看到一个导航里根本找不到
   入口的空页面。 */
@media (max-width: 860px) {
  .app-shell {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .app-sidebar {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 30;
    overflow: visible;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid var(--border);
  }
  .app-main { overflow: visible; }
  .app-content { flex: none; overflow: visible; }
  /* 品牌标题在竖排侧边栏里是"标题"，手机上两行渠道/标签已经占了地方，
     这行标题没必要再占一整行——页面顶部的topbar本身已经有当前账号信息，
     不缺这个标识。 */
  .app-brand { display: none; }

  /* 第一行：3大渠道按钮，一般3个足够窄不需要滚动，加overflow-x保底。 */
  .sidebar-channels {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 16px 10px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--border);
  }
  /* 第二行：当前渠道的状态标签，佳成物流这边有5个(还没算被隐藏的"导入
     并提交订单")，手机屏幕一般放不下，允许横向滑动，不允许换行(不然
     又变回3~4行的老问题)。 */
  .app-sidebar .sidebar-group {
    margin-top: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px 10px;
  }
  .sidebar-channels .sidebar-group-title,
  .sidebar-channels .sidebar-link,
  .app-sidebar .sidebar-group .tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
  .app-sidebar .tab-btn { padding: 8px 14px; }
  /* 客户明确要求："导入表格页面在移动端可以不要，用不着"——只隐藏手机端
     的导航入口，桌面端这个按钮/tab完全不受影响，数据/逻辑都还在。 */
  .tab-btn[data-tab="importTab"] { display: none; }
}