/* ============================================================================
   供应商协同系统 · 设计系统 + 组件
   ============================================================================
   规范来自《方案设计.md》6.1 / 6.5：
     · 主色 深蓝 #1F4E79（专业、长时间看不累）
     · 辅色 金色 #C2913A（沿用骋瑞官网，做点缀）
     · 状态色：**「该我操作」用橙色** —— 这是整个界面的核心设计，
       供应商打开就该看到橙色待办，不用自己翻
     · 移动端可点区域最小 44×44（手指点得中）
     · 断点 4 个：≤480 / 481–1024 / 1025–1439 / ≥1440
       平板不单独做 —— 横屏 1024 落小笔记本档、竖屏 768 落中间档
   ============================================================================ */

:root {
  --ink: #1b2430;
  --ink-2: #4a5a6e;
  --ink-3: #8899ab;
  --line: #e4e9f0;
  --bg: #f4f6f9;
  --card: #fff;

  --brand: #1f4e79;
  --brand-600: #17405f;
  --brand-050: #eef4fa;
  --gold: #c2913a;
  --gold-050: #fdf7ea;

  /* 状态色 —— 待你操作 = 橙 */
  --st-todo: #e8871a;      --st-todo-bg: #fff4e6;
  --st-doing: #1f6fd0;     --st-doing-bg: #eaf3ff;
  --st-done: #1a9c5b;      --st-done-bg: #e8f7ef;
  --st-wait: #7b8794;      --st-wait-bg: #f0f3f7;
  --st-bad: #d93a3a;       --st-bad-bg: #fdecec;

  --r-card: 12px;
  --r-btn: 8px;
  --sh: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --sh-2: 0 4px 14px rgba(16, 24, 40, .08);

  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font: 15px/1.6 var(--ff);
  color: var(--ink);
  background: var(--bg);
  /* 手机上有底部 tab，留出安全区（iPhone 的小黑条） */
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
}

a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================================
   布局骨架
   ============================================================================ */

/* 手机：全宽。PC/平板：居中限宽（方案 6.5：供应商端 PC 上内容居中限宽） */
.wrap { width: 100%; margin: 0 auto; padding: 0 14px; max-width: 720px; }

@media (min-width: 1025px) {
  .wrap { max-width: 1080px; padding: 0 24px; }
  body { padding-bottom: 0; }          /* PC 上不需要底部 tab */
}

/* 顶栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--brand); color: #fff;
  padding: 12px 0;
  box-shadow: var(--sh);
}
.topbar .wrap { display: flex; align-items: center; gap: 10px; }
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; }
.topbar .bell {
  position: relative; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: none; border: 0; color: #fff; cursor: pointer;
}
.topbar .bell .dot {
  position: absolute; top: 6px; right: 6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--st-bad); color: #fff; border-radius: 9px;
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 700;
}
.topbar .back {
  min-width: 44px; min-height: 44px; background: none; border: 0;
  color: #fff; font-size: 20px; cursor: pointer; padding: 0;
}

/* 底部 tab（手机） */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  flex: 1; min-height: 56px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; color: var(--ink-3); position: relative;
}
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar a .ic { font-size: 20px; line-height: 1; }
.tabbar a .dot {
  position: absolute; top: 6px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--st-bad); color: #fff; border-radius: 8px;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
@media (min-width: 1025px) { .tabbar { display: none; } }

/* ============================================================================
   卡片 / 列表
   ============================================================================ */

.card {
  background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--sh); margin: 12px 0; overflow: hidden;
}
.card-h {
  padding: 13px 15px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px;
}
.card-h h2 { font-size: 15px; margin: 0; flex: 1; font-weight: 600; }
.card-h .sub { font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.card-b { padding: 14px 15px; }
.card-b.flush { padding: 0; }

.muted { color: var(--ink-3); }
.tiny { font-size: 12.5px; }
.mono { font-variant-numeric: tabular-nums; }

/* 待办卡 —— 首页最显眼的东西（方案 6.2） */
.todo {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--r-card);
  padding: 15px; margin: 10px 0; box-shadow: var(--sh);
  border-left: 4px solid var(--st-wait);
}
.todo.is-todo { border-left-color: var(--st-todo); background: var(--st-todo-bg); }
.todo.is-doing { border-left-color: var(--st-doing); }
.todo .ic {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: #fff;
}
.todo .tx { flex: 1; min-width: 0; }
.todo .tx b { display: block; font-size: 15px; }
.todo .tx span { font-size: 12.5px; color: var(--ink-2); }
.todo .n { font-size: 22px; font-weight: 700; color: var(--st-todo); }
.todo .n.zero { color: var(--ink-3); font-weight: 400; font-size: 17px; }

/* 订单行 */
.ord {
  display: block; padding: 13px 15px; border-bottom: 1px solid var(--line);
  color: inherit; background: #fff;
}
.ord:last-child { border-bottom: 0; }
.ord:active { background: #f7f9fc; }
.ord .l1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ord .no { font-weight: 600; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ord .l2 { font-size: 13px; color: var(--ink-2); }
.ord .l3 { display: flex; justify-content: space-between; margin-top: 6px; }
.ord .amt { font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.ord .tm { font-size: 12px; color: var(--ink-3); }

/* 状态胶囊 */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill.todo { background: var(--st-todo-bg); color: var(--st-todo); }
.pill.doing { background: var(--st-doing-bg); color: var(--st-doing); }
.pill.done { background: var(--st-done-bg); color: var(--st-done); }
.pill.wait { background: var(--st-wait-bg); color: var(--st-wait); }
.pill.bad { background: var(--st-bad-bg); color: var(--st-bad); }
.pill.big { font-size: 14px; padding: 6px 14px; border-radius: 8px; }

/* ============================================================================
   订单详情：进度时间轴（方案 6.2）
   ============================================================================ */

.tl { padding: 4px 0; }
.tl-i { display: flex; gap: 11px; padding: 6px 0; position: relative; }
.tl-i .d {
  width: 13px; height: 13px; border-radius: 50%; flex: none; margin-top: 5px;
  background: #fff; border: 2px solid var(--line); z-index: 1;
}
.tl-i.ok .d { background: var(--st-done); border-color: var(--st-done); }
.tl-i.now .d { background: var(--st-todo); border-color: var(--st-todo);
  box-shadow: 0 0 0 4px var(--st-todo-bg); }
.tl-i:not(:last-child)::before {
  content: ""; position: absolute; left: 6px; top: 22px; bottom: -6px;
  width: 2px; background: var(--line);
}
.tl-i.ok:not(:last-child)::before { background: #cfe8da; }
.tl-i .t { flex: 1; }
.tl-i .t b { font-size: 14px; font-weight: 500; }
.tl-i.ok .t b { color: var(--ink); }
.tl-i:not(.ok):not(.now) .t b { color: var(--ink-3); }
.tl-i .t span { display: block; font-size: 12px; color: var(--ink-3); }

/* ============================================================================
   明细表 / 金额
   ============================================================================ */

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { background: #fafbfd; font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .pname { font-weight: 500; }
.tbl .spec { display: block; font-size: 12px; color: var(--ink-3); }

/* 金额汇总条 */
.sum {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 15px; background: #fafbfd; border-top: 1px solid var(--line);
}
.sum .k { font-size: 13px; color: var(--ink-2); }
.sum .v { font-size: 19px; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums; }
.sum .v.sm { font-size: 15px; font-weight: 600; color: var(--ink); }

/* 键值行 */
.kv { display: flex; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.kv .k { color: var(--ink-3); flex: none; width: 76px; }
.kv .v { flex: 1; word-break: break-all; }

/* ============================================================================
   按钮（移动端 ≥44px）
   ============================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-btn);
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font: 500 15px var(--ff); cursor: pointer; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn.pri { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.btn.danger { background: #fff; border-color: #f0c2c2; color: var(--st-bad); }
.btn.ghost { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn.blk { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* 底部固定操作条（手机） */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 10px; box-shadow: 0 -2px 10px rgba(16, 24, 40, .05);
}
.actions .btn { flex: 1; }
@media (min-width: 1025px) {
  .actions { position: static; border: 0; box-shadow: none; padding: 14px 0 0; }
}

/* ============================================================================
   表单
   ============================================================================ */

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.field label .req { color: var(--st-bad); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  font: 15px var(--ff); color: var(--ink); background: #fff;
}
.textarea { min-height: 76px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050);
}
.input.err, .select.err, .textarea.err { border-color: var(--st-bad); }
.err-tx { color: var(--st-bad); font-size: 12.5px; margin-top: 4px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

/* 图片上传格 */
.pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pic {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: #f0f3f7; border: 1px solid var(--line);
}
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic .x {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 14px; line-height: 24px; text-align: center; cursor: pointer; padding: 0;
}
.pic.add {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--ink-3); cursor: pointer; border-style: dashed;
}
.pic .up { position: absolute; inset: 0; background: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center; font-size: 12px; }

/* ============================================================================
   空态 / 加载 / 提示
   ============================================================================ */

.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty .ic { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.empty b { display: block; color: var(--ink-2); margin-bottom: 6px; font-size: 15px; }
.empty p { margin: 0; font-size: 13px; }

.loading { padding: 30px; text-align: center; color: var(--ink-3); font-size: 14px; }
.spin {
  display: inline-block; width: 18px; height: 18px; margin-right: 8px;
  border: 2px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: sp .7s linear infinite; vertical-align: -3px;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* 顶部提示条 */
.toast {
  position: fixed; left: 50%; top: 68px; transform: translateX(-50%);
  z-index: 90; max-width: 88%; padding: 11px 18px; border-radius: 10px;
  background: rgba(27, 36, 48, .94); color: #fff; font-size: 14px;
  box-shadow: var(--sh-2); opacity: 0; transition: opacity .18s, top .18s;
  pointer-events: none; text-align: center;
}
.toast.on { opacity: 1; top: 76px; }
.toast.ok { background: #17794a; }
.toast.err { background: #b62f2f; }

/* 弹层（确认 / 输入） */
.mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(16, 24, 40, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 481px) { .mask { align-items: center; padding: 20px; } }
.sheet {
  background: #fff; width: 100%; max-width: 460px;
  border-radius: 16px 16px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow: auto;
}
@media (min-width: 481px) { .sheet { border-radius: 14px; padding-bottom: 18px; } }
.sheet h3 { margin: 0 0 6px; font-size: 17px; }
.sheet .desc { color: var(--ink-2); font-size: 13.5px; margin: 0 0 16px; }

/* ============================================================================
   登录页
   ============================================================================ */

.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1f4e79 0%, #17405f 60%, #12303f 100%);
  padding: 24px 18px;
}
.login-box {
  width: 100%; max-width: 380px; background: #fff;
  border-radius: 16px; padding: 30px 24px; box-shadow: var(--sh-2);
}
.login-box .logo { text-align: center; margin-bottom: 22px; }
.login-box .logo .m {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 15px;
  background: linear-gradient(135deg, #1f4e79, #2f6fa8); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 25px; font-weight: 700;
}
.login-box h1 { font-size: 19px; margin: 0 0 4px; }
.login-box .sub { color: var(--ink-3); font-size: 13px; margin: 0; }

/* ============================================================================
   PC 增强（方案 6.5：供应商端在 PC 上表格化、信息更全）
   ============================================================================ */

@media (min-width: 1025px) {
  .cols { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
  .todo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .todo { margin: 0; }
  .ord:hover { background: #f7f9fc; }
  .actions { flex-direction: row-reverse; }
}

/* 打印/导出时的简化 */
@media print {
  .tabbar, .actions, .topbar { display: none; }
  body { background: #fff; padding: 0; }
}

/* ============================================================================
   我方端 · PC 布局（方案 6.5：我方端 PC 优先）
   ----------------------------------------------------------------------------
   为什么单独做：方案里写的是「供应商端手机优先 / 我方端 PC 优先」。
   只做一套手机界面的话，我方采购/财务天天坐在电脑前，
   看到的是中间一条窄栏、两边一大片空白 ——  informação挤在一起，效率差。

   规则：
     · 宽屏（≥1025px）且是**我方人员** → 显示左侧导航，内容区展宽
     · 供应商**永远用手机布局**（他们大部分用手机；电脑上能看就行）
       这条在 JS 里判断（给 body 加 class），CSS 只认 class
     · 平板不单独做（方案定的）：横屏 1024 落手机布局，够用
   ============================================================================ */

/* 侧边栏：默认不显示（JS 判断是我方 + 宽屏才去掉 hidden） */
.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: 208px;
  background: #17324b; color: #cfe0f0; z-index: 45;
  padding: 14px 0; overflow-y: auto;
}
.sidebar .sb-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 18px 16px; color: #fff; font-weight: 600; font-size: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 8px;
}
.sidebar .sb-brand .m {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, #2f6fa8, #1f4e79); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.sidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; color: #cfe0f0; font-size: 14px;
  border-left: 3px solid transparent; position: relative;
}
.sidebar a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sidebar a.on {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-left-color: #c2913a; font-weight: 600;
}
.sidebar a .ic { width: 20px; text-align: center; }
.sidebar a .dot {
  margin-left: auto; min-width: 17px; height: 17px; padding: 0 5px;
  background: #d93a3a; color: #fff; border-radius: 9px;
  font-size: 11px; line-height: 17px; text-align: center; font-weight: 700;
}

/* 我方在宽屏下：内容右移 + **居中限宽**（方案 6.5.3 原话：
   「主内容最大 1080px 居中，两边留白 —— 不要拉成一条横贯屏幕的长条」）
   ⚠️ 我第一版做成了全宽两列，和方案相反 —— 已改回来。
   全宽的问题：一行 40 个字，眼睛要横扫整屏；表格列被拉得很散，反而难看。 */
body.pc-layout { padding-bottom: 0; }
body.pc-layout .topbar { left: 208px; padding-left: 0; }
body.pc-layout .topbar .wrap { max-width: 1080px; padding-left: 24px; }
body.pc-layout .wrap {
  max-width: 1080px; margin-left: auto; margin-right: auto;
  padding: 0 24px;
  /* 侧边栏 208px 已占左侧，内容再居中要整体右移半个侧栏宽，视觉才真的居中 */
  transform: translateX(104px);
}
body.pc-layout .tabbar { display: none; }
/* 桌面上的操作条不再固定（内容高了会挡住） */
body.pc-layout .actions {
  position: static; box-shadow: none; border: 0;
  padding: 14px 0 4px; max-width: 1080px;
}
/* 表格化：PC 上列表用表格，一屏看十几行（方案 6.5.3） */
body.pc-layout table.tbl { width: 100%; }
body.pc-layout table.tbl th, body.pc-layout table.tbl td { padding: 10px 12px; }
/* 需要通栏的（表格、趋势图）不受限宽影响 */
body.pc-layout [data-wide] { grid-column: 1 / -1; }

@media (max-width: 1300px) {
  /* 屏幕不够宽时不做右移，否则右边会贴边 */
  body.pc-layout .wrap { transform: none; }
}

/* 收货进度条（PC 订单表格里用） */
.pbar { height: 5px; background: #eef1f4; border-radius: 3px; overflow: hidden; }
.pbar > i { display: block; height: 5px; background: #1f4e79; }
/* PC 表格：表头吸顶、行悬停 */
body.pc-layout .ord-tbl thead th {
  position: sticky; top: 0; background: #f7f9fb; z-index: 2;
  font-size: 12.5px; color: #5a6b7d; font-weight: 600;
}
body.pc-layout .ord-tbl tbody tr:hover { background: #f5f9ff; }


/* ============================================================================
   PC 详情页左右分栏（方案 6.5.3：「左边明细、右边进度+操作，不要再往下滚」）
   ----------------------------------------------------------------------------
   怎么实现的：JS 只给 #view 加一个 class，剩下的交给 grid。
   为什么不动页面结构：详情页的 HTML 是一长串拼出来的，
   为了分栏去重排它 = 把已经能跑的东西拆开重装 —— 不值当。
   用 grid 的自动排布：前几块（明细）落左栏，后面的（进度、操作）落右栏。
   手机/供应商端没有这个 class，完全不受影响。
   ============================================================================ */
@media (min-width: 1025px) {
  body.pc-layout #view.detail-2col {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
  /* 卡片之间用 grid 的 gap，不要再各带 margin */
  body.pc-layout #view.detail-2col > .card,
  body.pc-layout #view.detail-2col > .sum,
  body.pc-layout #view.detail-2col > .empty { margin: 0; }
  /* 时间轴/进度那块放右栏（它是「进度」） */
  body.pc-layout #view.detail-2col > [data-wide],
  body.pc-layout #view.detail-2col > .actions,
  body.pc-layout #view.detail-2col > .timeline { grid-column: 1 / -1; }
}

/* ============================================================================
   ★ 兜底：hidden 属性必须真的能藏住
   ----------------------------------------------------------------------------
   为什么需要这条：hidden 起作用靠的是浏览器默认样式里的 display:none，
   但**作者样式优先级更高** —— 只要哪里写了
       .login-page { display: flex; }
   那么 element.hidden = true 就**完全没用**（元素照样显示）。

   这个 bug 在线上出现过一次：登录成功后登录页没收掉，
   左边菜单出来了、右边还盖着登录框（看着像"登录了但什么都没加载"）。

   这个项目里十几处用 hidden 控制显隐（登录页、侧边栏、返回键、小红点…），
   所以必须有这条全局兜底，否则每一处都可能"设了却没用"。
   ============================================================================ */
[hidden] { display: none !important; }