/* 领泽订单管理系统 —— 全站样式（含手机适配 + A4 打印） */
:root{
  --bg:#f4f6f9; --card:#fff; --line:#e3e8ef; --text:#1f2937; --muted:#6b7280;
  --primary:#1d6fd0; --primary-d:#155aa8; --ok:#16a34a; --warn:#d97706; --danger:#dc2626;
  --radius:10px; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","微软雅黑","PingFang SC","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:var(--primary);text-decoration:none}
h1,h2,h3{margin:0 0 12px}
h2{font-size:20px}
h3{font-size:17px}

/* ---------------- 顶栏 + 导航 ---------------- */
.topbar{background:#12325c;color:#fff;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.topbar .brand{font-size:17px;font-weight:700;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .who{font-size:13px;opacity:.9}
.topbar .who b{opacity:1}
.topbar button{background:rgba(255,255,255,.15);border:0;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px}
.topbar button:hover{background:rgba(255,255,255,.28)}
.nav{background:#fff;border-bottom:1px solid var(--line);padding:0 8px;display:flex;gap:2px;overflow-x:auto;position:sticky;top:0;z-index:20}
.nav a{padding:11px 14px;color:#4b5563;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent}
.nav a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.wrap{max-width:none;margin:0 auto;padding:16px 20px}
/* 表单类页面不需要拉太宽，字太长反而难读 */
.wrap.narrow{max-width:1100px}

/* ---------------- 卡片 / 工具条 ---------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.card>h3{padding-bottom:10px;border-bottom:1px solid var(--line)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px}
.toolbar .fld{display:flex;flex-direction:column;gap:3px}
.toolbar label{font-size:12px;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}

/* ---------------- 表单 ---------------- */
label.lb{display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:600}
input,select,textarea{
  font-family:inherit;font-size:15px;color:var(--text);background:#fff;
  border:1px solid #cbd5e1;border-radius:8px;padding:9px 10px;width:100%;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(29,111,208,.12)}
input[readonly],input:disabled,select:disabled,textarea:disabled{background:#f3f4f6;color:#6b7280}
textarea{min-height:70px;resize:vertical}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.field .custom{margin-top:6px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ---------------- 按钮 ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;
  background:var(--primary);color:#fff;padding:9px 16px;border-radius:8px;cursor:pointer;font-size:14px;
  font-family:inherit;white-space:nowrap;width:auto}
.btn:hover{background:var(--primary-d)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.gray{background:#fff;color:#374151;border-color:#cbd5e1}
.btn.gray:hover{background:#f3f4f6}
.btn.ok{background:var(--ok)} .btn.ok:hover{filter:brightness(.92)}
.btn.warn{background:var(--warn)} .btn.warn:hover{filter:brightness(.92)}
.btn.danger{background:var(--danger)} .btn.danger:hover{filter:brightness(.92)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:6px}

/* ---------------- 表格 ---------------- */
.tablebox{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th,td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:middle}
th{background:#f8fafc;font-weight:600;color:#374151;white-space:nowrap;position:sticky;top:0;z-index:1}
tbody tr:hover{background:#f8fbff}

/* 列表每一行**只占一行高**：所有单元格都不换行，长内容用省略号，点「详情」看全文 */
tbody td{white-space:nowrap}
td.nowrap,th.nowrap{white-space:nowrap}
td.cfg{max-width:240px;overflow:hidden;text-overflow:ellipsis;font-size:13px;color:#4b5563}
td.cfg.mini{max-width:150px}
/* 操作列：按钮横着排一排，不许换行，否则整行会被撑高好几倍 */
tbody td:last-child{white-space:nowrap}
tbody td:last-child .row{flex-wrap:nowrap}

/* 操作列钉在最右边——列再多、横向滚动到哪，按钮都在手边 */
th:last-child,td:last-child{position:sticky;right:0;z-index:2;background:#fff}
thead th:last-child{z-index:3;background:#f8fafc}
tbody tr:hover td:last-child{background:#f8fbff}
th:last-child::before,td:last-child::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  margin-left:-6px;pointer-events:none;
  background:linear-gradient(to left,rgba(15,23,42,.10),transparent);
}
.empty{padding:34px;text-align:center;color:var(--muted)}

/* 行内小标记（比如「发车10天」），不另起一行 */
.mark{display:inline-block;margin-left:4px;padding:0 5px;border-radius:4px;font-size:11px;
  background:#fee2e2;color:#b91c1c;vertical-align:middle}
.mark.warn{background:#ffedd5;color:#c2410c}
.mark.ok{background:#dcfce7;color:#15803d}

/* ---------------- 分页条 ---------------- */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--muted)}
.pager .grow{flex:1}
.pager .info b{color:var(--text)}
.pager .psize{width:auto;padding:5px 8px;font-size:13px}
@media (max-width:720px){ .pager .grow{display:none} .pager{justify-content:center} .pager .info{width:100%;text-align:center} }

/* ---------------- 状态标签 ---------------- */
.tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;white-space:nowrap;border:1px solid}
.tag.s待核对{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.tag.s已退回{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.tag.s待排产{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.tag.s生产中{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.tag.s待发车{background:#ecfeff;color:#0e7490;border-color:#a5f3fc}
.tag.s已发车{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.tag.s已撤回{background:#f3f4f6;color:#6b7280;border-color:#e5e7eb}

/* ---------------- 统计块 ---------------- */
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:21px;font-weight:700;margin-top:2px}
.stat.red .v{color:var(--danger)} .stat.green .v{color:var(--ok)}

/* ---------------- 弹窗 ---------------- */
.mask{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.modal{background:#fff;border-radius:12px;width:100%;max-width:640px;max-height:90vh;overflow:auto;padding:18px}
.modal h3{display:flex;align-items:center}
.modal .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:22px;line-height:1}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}

/* ---------------- 提示条 ---------------- */
#toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#111827;color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:88vw}
.toast.ok{background:#15803d} .toast.err{background:#b91c1c}

/* ---------------- 登录页 ---------------- */
.loginbg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;
  background:linear-gradient(160deg,#12325c,#1d6fd0)}
.loginbox{background:#fff;border-radius:14px;padding:26px;width:100%;max-width:400px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.loginbox h1{font-size:21px;text-align:center;margin-bottom:20px}
.loginbox .fld{margin-bottom:12px}

/* ---------------- 详情两列表 ---------------- */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.kv div{padding:8px 12px;border-bottom:1px solid var(--line);font-size:14px;background:#fff}
.kv div span{color:var(--muted);display:inline-block;min-width:96px}
.timeline{list-style:none;padding:0;margin:8px 0 0;font-size:13px}
.timeline li{padding:6px 0;border-bottom:1px dashed var(--line);color:#4b5563}
.timeline b{color:var(--text)}

/* ================= 手机 + 平板（≤1024px）================= */
/* 这么多列在小屏上塞不下，整张表改成「一张订单一张卡片」，操作按钮铺在卡片底部 */
@media (max-width:1024px){
  .wrap{padding:10px}
  .card{padding:12px}
  .grid,.grid.g2{grid-template-columns:1fr}
  .toolbar{gap:8px}
  .toolbar .fld{flex:1 1 100%}
  .toolbar .btn,.toolbar .right{flex:1 1 auto;margin-left:0}
  .topbar{padding:9px 12px}
  .topbar .brand{font-size:15px}
  .topbar .who{font-size:12px}
  .btn{padding:11px 14px;min-height:42px}      /* 手指点得中 */
  .btn.sm{padding:8px 12px;min-height:36px}
  .nav a{padding:12px 13px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:10px 12px}
  .stat .v{font-size:18px}
  .modal{max-height:94vh;padding:14px}
  .modal .foot .btn{flex:1 1 auto}
  .kv{grid-template-columns:1fr}
  input,select,textarea{font-size:16px}         /* 小于 16px 时 iOS 会自动放大页面 */

  /* —— 表格 → 卡片 —— */
  .tablebox{overflow:visible;border:0;background:transparent;border-radius:0}
  /* table 本身也要变成块级，否则它按「表格」规则去撑内容宽度，卡片会横向溢出 */
  table.resp{display:block;min-width:0;width:100%;max-width:100%;font-size:14px}
  table.resp thead{display:none}
  table.resp tbody,table.resp tr,table.resp td{display:block;width:auto;max-width:100%}
  table.resp tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);margin-bottom:10px;padding:8px 12px;
  }
  table.resp tr:hover{background:#fff}
  table.resp td{
    border:0;padding:4px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;   /* 长内容一行省略，看全文点详情 */
  }
  table.resp td::before{
    content:attr(data-label)"：";color:var(--muted);font-size:12px;margin-right:2px;
  }
  table.resp td:not([data-label])::before{content:""}
  table.resp td.cfg{max-width:none}

  /* 订单号 = 卡片标题；状态贴在标题右边，一眼看清是哪一单、到哪一步了 */
  table.resp td.cardtitle{
    font-size:17px;font-weight:700;padding:2px 0 8px;
    border-bottom:1px solid var(--line);margin-bottom:6px;padding-right:96px;
  }
  table.resp td.cardtitle::before{content:""}
  table.resp td.cardstatus{position:absolute;right:12px;top:10px;padding:0;z-index:1}
  table.resp td.cardstatus::before{content:""}
  /* 有勾选框的表（计划汇总），勾选框放右上，状态往左让一让 */
  table.resp tr:has(.pickcell) td.cardstatus{right:44px}
  /* 操作按钮那一格：撑满整张卡片底部，按钮加大，手指好点 */
  table.resp td:last-child{
    position:static;white-space:normal;overflow:visible;
    margin-top:8px;padding-top:10px;border-top:1px dashed var(--line);background:transparent;
  }
  table.resp td:last-child::before{content:"";display:none}
  table.resp td:last-child .row{gap:8px;flex-wrap:wrap}
  table.resp td:last-child .btn{flex:1 1 30%;min-height:42px;font-size:14px;padding:10px 12px}
  table.resp thead th:last-child{position:static}
  /* 勾选框那一格顶到右上角，方便单手点 */
  table.resp td.pickcell{position:absolute;right:12px;top:12px;margin-top:0;padding:0}
  table.resp td.pickcell input{width:20px;height:20px}
  table.resp tr{position:relative}
}

/* 超窄屏（老人机 / 分屏）再挤一点 */
@media (max-width:380px){
  .stats{grid-template-columns:1fr}
  .wrap{padding:8px}
  table.resp tr{padding:8px 10px}
}

/* ---------------- 打印视图（A4） ---------------- */
.sheet{background:#fff;width:210mm;min-height:290mm;margin:0 auto 14px;padding:16mm 14mm;box-shadow:var(--shadow);
  border:1px solid var(--line)}
.sheet h1{text-align:center;font-size:26px;letter-spacing:6px;margin:0 0 14px}
.sheet table{width:100%;min-width:0;border-collapse:collapse;font-size:15px}
.sheet td{border:1px solid #111;padding:9px 10px;vertical-align:middle;height:34px}
.sheet td.h{text-align:center;font-size:24px;font-weight:700;letter-spacing:6px;height:48px}
.sheet .foot{margin-top:14px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
@media print{
  @page{size:A4 portrait;margin:12mm}
  body{background:#fff}
  .noprint{display:none !important}
  .sheet{width:auto;min-height:0;margin:0;padding:0;box-shadow:none;border:0;page-break-after:always}
  .sheet:last-child{page-break-after:auto}
}
@media (max-width:720px){ .sheet{width:auto;padding:12px} .sheet h1{font-size:20px;letter-spacing:3px} }