/* ===== 粮食收购系统 样式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green:#2e7d32; --green2:#43a047; --bg:#f2f5f2; --card:#fff;
  --line:#e3e8e3; --txt:#222; --sub:#777; --red:#c62828; --blue:#1565c0; --amber:#b26a00;
}
html { -webkit-text-size-adjust: 100%; }
body { font-family: "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif; background: var(--bg); color: var(--txt); font-size: 16px; line-height: 1.55; }
a { color: var(--green); text-decoration: none; }

/* 顶栏 */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--green); color: #fff; display: flex; flex-wrap: wrap; align-items: center; padding: 8px 12px; gap: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.brand { font-weight: 700; font-size: 18px; cursor: pointer; margin-right: 8px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.nav a { color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 15px; }
.nav a:hover { background: rgba(255,255,255,.18); }
.nav a.hot { background: #ff9800; font-weight: 700; }
.userbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.userbox .logout { color:#fff; border:1px solid rgba(255,255,255,.5); padding:3px 8px; border-radius:5px; }
.uname { opacity:.95; }

.container { max-width: 1000px; margin: 0 auto; padding: 12px 12px 60px; }
.foot { text-align:center; color:var(--sub); font-size:12px; padding:10px; }

.page-head { display:flex; justify-content:space-between; align-items:center; margin:8px 0 12px; gap:8px; flex-wrap:wrap; }
.page-head h2 { font-size:20px; }
.sec { margin: 18px 0 8px; font-size: 17px; color: #333; border-left: 4px solid var(--green); padding-left: 8px; }

/* 提示 */
.flashes { max-width: 1000px; margin: 8px auto 0; padding: 0 12px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; font-size: 15px; }
.flash.ok { background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7; }
.flash.error { background:#ffebee; color:#b71c1c; border:1px solid #ef9a9a; }

/* 卡片统计 */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:10px; margin-bottom:6px; }
.card { background:var(--card); border-radius:12px; padding:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); position:relative; }
.card-num { font-size:26px; font-weight:700; color:var(--green); }
.card-num.warn { color:var(--amber); }
.card-num.ok { color:var(--blue); }
.card-label { color:var(--sub); font-size:13px; margin-top:2px; }
.card-link { position:absolute; top:10px; right:12px; font-size:12px; color:var(--blue); }

/* 面板/表单 */
.panel { background:var(--card); border-radius:12px; padding:14px; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.panel h3 { font-size:16px; margin-bottom:10px; color:#333; }
label { display:block; font-size:14px; color:#444; margin:10px 0 4px; }
.req { color:var(--red); }
input, select, textarea { width:100%; padding:12px 12px; font-size:17px; border:1px solid #c8d2c8; border-radius:8px; background:#fff; color:#222; }
input:focus, select:focus { outline:2px solid var(--green2); border-color:var(--green2); }
input[type=radio] { width:auto; }
.hint { color:var(--sub); font-size:13px; margin-top:6px; }
.form-inline { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.form-inline input, .form-inline select { width:auto; min-width:120px; padding:8px 10px; font-size:15px; }

/* 按钮 */
.btn { display:inline-block; background:#eef4ee; color:var(--green); border:1px solid #cfe0cf; padding:8px 14px; border-radius:8px; font-size:15px; cursor:pointer; text-align:center; }
.btn:hover { background:#e0efe0; }
.btn-primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green2); }
.btn-big { width:100%; padding:16px; font-size:19px; font-weight:700; margin-top:8px; }
.btn-mini { padding:5px 10px; font-size:13px; }
.btn.ghost { background:#fff; }
.btn-block { width:100%; padding:13px; font-size:18px; margin-top:6px; }

/* 品种大按钮 */
.variety-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.var-card { display:block; border:2px solid var(--line); border-radius:12px; padding:12px; text-align:center; cursor:pointer; background:#fbfdfb; }
.var-card input { display:none; }
.var-card .var-name { display:block; font-size:19px; font-weight:700; color:#333; }
.var-card small { color:var(--sub); }
.var-card:has(input:checked) { border-color:var(--green); background:#e8f5e9; }
.var-card:has(input:checked) .var-name { color:var(--green); }

/* 表格 */
.table-wrap { overflow-x:auto; background:var(--card); border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.tbl { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.tbl th, .tbl td { padding:9px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl th { background:#f0f5f0; color:#444; }
.tbl tr:last-child td { border-bottom:none; }
.money { color:var(--red); font-weight:700; }
.tag { display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; white-space:nowrap; }
.tag.weighed_in { background:#fff3e0; color:#b26a00; }
.tag.done { background:#e3f2fd; color:#0d47a1; }
.tag.settled { background:#e8f5e9; color:#1b5e20; }
.tag.void { background:#eee; color:#777; text-decoration:line-through; }

/* 挂单队列卡片 */
.queue-list { display:flex; flex-direction:column; gap:10px; }
.queue-card { background:var(--card); border-radius:12px; padding:12px 14px; box-shadow:0 1px 4px rgba(0,0,0,.06); border-left:5px solid var(--amber); }
.queue-top { display:flex; align-items:center; gap:8px; }
.ono { font-size:15px; color:var(--amber); }
.qtime { margin-left:auto; color:var(--sub); font-size:13px; }
.queue-mid { margin:8px 0 4px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.q-farmer { font-size:17px; font-weight:700; }
.queue-info { color:#555; font-size:14px; }
.queue-actions { margin-top:10px; display:flex; gap:8px; align-items:center; }
.queue-actions .btn-primary { font-size:17px; padding:10px 20px; }

/* 空状态 */
.empty-box { background:var(--card); border-radius:12px; padding:40px 20px; text-align:center; color:var(--sub); }
.empty-box .btn { margin-top:12px; }
.empty { color:var(--sub); text-align:center; padding:20px; }

/* 农户联想 */
#farmer_suggest, #idcard_hit { position:relative; }
.suggest-item { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; background:#fff; }
.suggest-item:hover { background:#e8f5e9; }
.suggest-empty { color:var(--sub); font-size:13px; padding:4px 2px; }
.suggest-empty.ok { color:var(--green); }

/* 地磅 */
.scale-box { margin-top:12px; border:2px dashed #b0c4b0; border-radius:12px; padding:12px; text-align:center; background:#fbfdfb; }
.scale-head { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.scale-status { font-size:13px; color:var(--sub); }
.scale-value { font-size:56px; font-weight:800; color:#111; font-family:Consolas,monospace; margin:6px 0; letter-spacing:2px; }
.scale-value.connected { color:var(--green); }
.scale-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* 结算底栏 */
.settle-bar { position:sticky; bottom:0; background:#fff; border-top:2px solid var(--green); margin-top:10px; padding:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; box-shadow:0 -2px 8px rgba(0,0,0,.08); }
.settle-bar .big { font-size:22px; }

/* 过滤条 */
.filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; background:var(--card); padding:10px; border-radius:10px; align-items:center; }
.filter-bar input, .filter-bar select { width:auto; padding:8px 10px; font-size:15px; }

/* 登录 */
.login-body { background:linear-gradient(135deg,#2e7d32,#66bb6a); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { background:#fff; border-radius:16px; padding:30px 24px; width:100%; max-width:360px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.login-logo { font-size:54px; }
.login-card h1 { font-size:22px; color:var(--green); margin-top:6px; }
.login-sub { color:var(--sub); margin:4px 0 16px; }
.login-form input { margin-bottom:10px; }

/* 大数/净重预览 */
.big-line { font-size:18px; margin:6px 0; }
.big { font-size:30px; color:var(--green); }
.net-preview { margin:12px 0; font-size:18px; }
.net-preview b { font-size:28px; color:var(--green); }

/* 凭证打印 */
.voucher { width: 100%; max-width: 720px; margin: 12px auto; background:#fff; border:2px solid #000; padding:18px 16px; font-size:15px; }
.v-head { text-align:center; border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:10px; }
.v-head h1 { font-size:20px; letter-spacing:2px; }
.v-head h2 { font-size:17px; margin:2px 0; }
.v-no { font-size:13px; color:#333; }
.v-table { width:100%; border-collapse:collapse; }
.v-table td { border:1px solid #999; padding:7px 8px; }
.v-label { background:#f2f2f2; font-weight:600; width:74px; white-space:nowrap; }
.v-net td { font-weight:700; }
.v-amount { font-size:20px; color:#000; font-weight:800; }
.v-foot { margin-top:14px; }
.v-words { margin:4px 0 12px; }
.v-sigs { display:flex; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:8px; }
.v-tip { text-align:center; color:#555; margin-top:14px; font-size:12px; }

/* 打印时只显示凭证 */
@media print {
  body { background:#fff; }
  .topbar, .foot, .flashes, .no-print, .panel, .bottomnav { display:none !important; }
  .container { max-width:100%; padding:0; }
  .voucher { max-width:80mm; margin:0; border:1.5px solid #000; padding:6mm; font-size:12px; }
  .v-head h1 { font-size:16px; }
  .v-head h2 { font-size:14px; }
  .v-table td { padding:3mm 2mm; }
  .v-amount { font-size:15px; }
}

@media (max-width:600px){
  .brand{font-size:16px;}
  .topbar{padding:6px 8px;}
  .nav a{padding:5px 8px;font-size:14px;}
}

/* ===== 凭证样板设置 ===== */
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px; }
.form-grid label { margin-top:10px; }
.radio-row { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.radio-pill { display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line); border-radius:20px; padding:7px 14px; cursor:pointer; font-size:15px; }
.radio-pill input { width:auto; }
.radio-pill:has(input:checked) { border-color:var(--green); background:#e8f5e9; color:var(--green); font-weight:600; }
.chk-row { display:flex; flex-wrap:wrap; gap:6px 16px; margin:6px 0 4px; }
.chk-row label { display:inline-flex; align-items:center; gap:6px; margin:4px 0; font-size:15px; cursor:pointer; }
.chk-row input { width:auto; transform:scale(1.2); }
textarea { font-family:inherit; }

/* 凭证样式补充 */
.v-sub { font-size:13px; color:#333; margin-top:2px; }
.v-sig { display:inline-block; min-width:32%; }
.v-sig:nth-child(2) { text-align:center; }
.v-sig:nth-child(3) { text-align:right; }
.voucher.paper-80 { max-width: 340px; }
@media print {
  .voucher.paper-a4 { max-width:170mm; }
  .v-sig { min-width:30%; }
}
@media (max-width:420px){
  .v-sig { display:block; width:100%; margin:6px 0; text-align:left !important; }
}
.v-org-line { font-size:12px; color:#333; margin:2px 0; }
.length-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 4px; }

/* ===== 凭证字体排版（可自定义）===== */
.voucher {
  --v-font: "Microsoft YaHei","PingFang SC","SimSun",sans-serif;
  --v-size: 15px;
  --v-title: 17px;
  --v-rowpad: 7px;
  font-family: var(--v-font);
  font-size: var(--v-size);
}
.v-head h1 { font-size: calc(var(--v-title) + 3px); }
.v-head h2 { font-size: var(--v-title); }
.v-no { font-size: calc(var(--v-size) - 2px); }
.v-org-line, .v-sub { font-size: calc(var(--v-size) - 3px); }
.v-table td { padding: var(--v-rowpad) 8px; }
.v-sigs { font-size: calc(var(--v-size) - 1px); }
.v-tip { font-size: calc(var(--v-size) - 3px); }
.v-amount { font-size: calc(var(--v-size) + 6px); }
.sub-sec { margin: 14px 0 4px; font-size: 14px; color: #555; border-top: 1px dashed var(--line); padding-top: 10px; }
.v-table.v-list .v-label { width: 80px; min-width: 80px; white-space: nowrap; }
.fphoto { width: 54px; height: 36px; object-fit: cover; border: 1px solid #ccc; border-radius: 4px; display: block; }
.no-photo { color: #aaa; font-size: 12px; }
.cphoto { max-width: 110px; border: 1px solid #ccc; border-radius: 4px; display: block; }
.fstat { font-size: 12px; color: #777; margin-top: 3px; white-space: nowrap; }
.fstat.warn { color: #c62828; }
.idcard-page img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
@media print {
  .topbar, .foot, .flashes, .no-print { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .idcard-page img { max-width: 190mm; }
}
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 16px; text-align: center; }
#camVideo { width: 100%; max-height: 60vh; background: #000; border-radius: 8px; }
.btn-mini.danger { color: #c62828; border-color: #ef9a9a; background: #fff5f5; }
.modal-box.wide { max-width: 640px; }

/* ===== 图片查看弹窗（证件图/银行卡图，页面内放大查看） ===== */
.modal-box.imgview { max-width: min(94vw, 920px); width: auto; padding: 12px; }
.modal-mask.imgmask { padding: 10px; }
#imgViewBig { max-width: 100%; max-height: 76vh; object-fit: contain; margin: 10px auto 0; border-radius: 6px; background: #fff; display: block; }
.crop-area { width: 100%; max-height: 62vh; overflow: auto; display: flex; justify-content: center; background: #111; border-radius: 8px; }
#cropCanvas { max-width: 100%; cursor: crosshair; touch-action: none; background: #fff; }

/* ===== 手机端优化 ===== */
@media (max-width: 640px) {
  .topbar { flex-wrap: nowrap; gap: 4px; padding: 6px 6px; }
  .brand { font-size: 15px; white-space: nowrap; margin-right: 4px; }
  .nav { flex: 1; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 8px 9px; font-size: 14px; white-space: nowrap; }
  .userbox .uname { display: none; }
  .userbox .logout { font-size: 12px; padding: 3px 6px; }
  .container { padding: 10px 8px 64px; }
  .page-head h2 { font-size: 18px; }
  input, select, textarea { font-size: 16px; padding: 12px; }  /* 防 iOS 聚焦放大 */
  .btn { padding: 11px 13px; }
  .btn-big { padding: 15px; font-size: 18px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card-num { font-size: 22px; }
  .tbl th, .tbl td { padding: 8px 7px; font-size: 13px; }
  .tbl { min-width: 480px; }
  .settle-bar { flex-direction: column; align-items: stretch; text-align: center; }
  .settle-bar > div { justify-content: center; }
  .filter-bar input, .filter-bar select { font-size: 16px; }
  .queue-actions { flex-wrap: wrap; }
  .modal-box { margin: 0 6px; }
}

/* ===== 手机底部快捷导航 ===== */
.bottomnav { display: none; }
@media (max-width: 640px) {
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff; border-top: 1px solid var(--line); z-index: 90;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
  }
  .bn { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px 4px; color: #666; }
  .bn span { font-size: 20px; line-height: 1.2; }
  .bn small { font-size: 11px; margin-top: 1px; }
  .bn.on { color: var(--green); font-weight: 700; }
  .bn.on small { color: var(--green); }
  .foot { margin-bottom: 58px; }
}

/* ===== 手机顶部菜单：不滑动、换行大按钮 ===== */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 2px; }
  .brand { font-size: 17px; flex: 0 0 auto; }
  .userbox { margin-left: auto; flex: 0 0 auto; }
  .topbar .nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    gap: 3px;
  }
  .topbar .nav a {
    flex: 1 1 23%;
    text-align: center;
    font-size: 16px;
    padding: 11px 4px;
    white-space: nowrap;
  }
  .topbar .nav a.hot { font-weight: 700; }
}

/* ===== 顶部菜单：3列大按钮（2-3行） ===== */
@media (max-width: 640px) {
  .topbar .nav a {
    flex: 1 1 30%;
    font-size: 17px;
    padding: 13px 6px;
  }
}

/* ===== 手机版：去掉顶部导航，底部导航两行 ===== */
@media (max-width: 640px) {
  .topbar .nav { display: none; }
  .topbar { flex-wrap: nowrap; }
  .bottomnav { flex-wrap: wrap; padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0)); }
  .bottomnav .bn { flex: 0 0 20%; max-width: 20%; padding: 6px 2px; }  /* 上排4个 */
    /* 下排5个 */
  .bn span { font-size: 21px; }
  .bn small { font-size: 12px; }
  .foot { margin-bottom: 128px; }
}

/* ===== 手机版 毛重登记页调整 ===== */
@media (max-width: 640px) {
  .hid-m { display: none !important; }
  .variety-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .var-card { padding: 8px 2px; border-radius: 8px; }
  .var-name { font-size: 15px; }
  .var-card small { display: none; }
  .scale-box { display: none !important; }   /* 地磅仅电脑端 */
}

/* ===== 农户档案-操作分三行 ===== */
.ops-row { display:flex; flex-wrap:nowrap; align-items:center; gap:5px 6px; padding:2px 0; }
.ops-row + .ops-row { border-top:1px dashed var(--line); margin-top:4px; padding-top:5px; }
.ops-tag { font-size:12px; color:var(--sub); flex:0 0 auto; min-width:24px; }

/* ===== 农户档案-行内编辑（姓名/身份证号/手机号） ===== */
.frow .edit { display:none; box-sizing:border-box; padding:5px 6px; font-size:13px; border:1px solid #c8d2c8; border-radius:6px; }
.frow.editing .view { display:none; }
.frow.editing .edit { display:inline-block; }
.frow .edit.name-i { width:84px; }
.frow .edit.card-i { width:168px; }
.frow .edit.phone-i { width:118px; }
@media (max-width: 640px) {
  .frow .edit.name-i { width:76px; }
  .frow .edit.card-i { width:150px; }
  .frow .edit.phone-i { width:105px; }
}

/* ===== 两列表单（毛重/补单等，缩短页面） ===== */
.grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; align-items:end; }
.grid-2 > div { min-width:0; }
.grid-2 .full { grid-column: 1 / -1; }
.grid-2 label { margin: 6px 0 3px; font-size: 13px; }
.grid-2 input, .grid-2 select { padding: 9px 10px; font-size: 16px; }
@media (max-width: 400px) {
  .grid-2 input, .grid-2 select { padding: 8px 8px; }
}

/* ===== 手机端补单：日期/时间框缩小，和其它输入框协调 ===== */
.grid-2 input[type="date"],
.grid-2 input[type="time"] {
  padding: 8px 6px;
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
}
@media (max-width: 640px) {
  .grid-2 input[type="date"],
  .grid-2 input[type="time"] {
    padding: 7px 5px;
    font-size: 13px;
  }
}