/* ============================================================
 * 强国建材流水管理系统 - 样式文件
 * 版本：v8.2
 * 说明：所有页面样式，包含响应式布局
 * ============================================================ */

:root{--bg:#f0f2f5;--card:#fff;--text:#1a1a1a;--muted:#8a8f99;--line:#e5e7eb;--brand:#2563eb;--brand2:#1d4ed8;--ok:#16a34a;--warn:#d97706;--danger:#dc2626;--z:#dc2626;--sz:#7c3aed;--s:#0891b2;--mds:#15803d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 隐藏所有数字输入框的加减步进器，只能手动输入 */
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;appearance:textfield}
/* 暂时隐藏表格录入、录入流水、拍照/OCR功能 */
[data-page="batchentry"],
[data-page="entry"],
[data-page="ocr"]{display:none !important}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:14px}
.app{max-width:1400px;margin:0 auto;padding:8px 10px 80px}
header{position:sticky;top:0;z-index:50;background:rgba(240,242,245,.96);backdrop-filter:blur(10px);padding:6px 0 8px}
h1{margin:0;font-size:18px;font-weight:700}.sub{font-size:11px;color:var(--muted);margin-top:2px}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12px;white-space:nowrap;flex-shrink:0}
.nav button.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.nav .logout-btn{display:none !important} .header-logout{position:absolute;top:8px;right:10px;color:#e74c3c;cursor:pointer;font-size:13px;z-index:100}
.page{display:none}.page.active{display:block}
.grid{display:grid;gap:10px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card h3{margin:0 0 10px;font-size:15px}
.kpi{font-size:22px;font-weight:700;margin-top:4px}.muted{color:var(--muted)}.small{font-size:11px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.between{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.field{margin-bottom:10px}
label{display:block;font-size:12px;color:#555;margin-bottom:4px;font-weight:500}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid #d1d5db;border-radius:8px;background:#fff;font-size:14px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.btn{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:14px;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}.btn.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn.warn{background:var(--warn);color:#fff;border-color:var(--warn)}.btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:12px}
.badge{display:inline-block;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:500}
.badge.z{background:#fee2e2;color:var(--z)}.badge.sz{background:#ede9fe;color:var(--sz)}.badge.s{background:#cffafe;color:var(--s)}.badge.mds{background:#dcfce7;color:var(--mds)}
.badge.ok{background:#dcfce7;color:var(--ok)}.badge.warn{background:#fef3c7;color:var(--warn)}.badge.gray{background:#f3f4f6;color:#6b7280}
.detail-row{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;background:#fafbfc}
.detail-row .dr-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.detail-row .dr-header .dr-idx{font-weight:600;color:var(--muted)}
.detail-row.voided{opacity:0.5;text-decoration:line-through}
.tx-voided{opacity:0.6;text-decoration:line-through;background:#f9fafb}
.group-toggle{cursor:pointer;user-select:none;color:var(--brand);font-size:12px}
.group-detail{background:#f9fafb;border-left:3px solid var(--line);padding:8px 12px;margin:4px 0;border-radius:0 6px 6px 0}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:800px}
/* 流水查询表格列多，设置更大最小宽度确保可横向滚动 */
#page-list .table{min-width:1300px}
.table th,.table td{padding:7px 8px;border-bottom:1px solid var(--line);font-size:12px;text-align:left;vertical-align:top;white-space:nowrap}
.table th{background:#fafafa;font-weight:600;position:sticky;top:0}
.table tr:hover{background:#f9fafb}
.notice{padding:10px 12px;border-radius:10px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:13px}
.warnbox{padding:10px 12px;border-radius:10px;background:#fffbeb;border:1px solid #fde68a;color:#92400e;font-size:13px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center;z-index:100;padding:0}
.modal.show{display:flex}.modalbox{width:100%;max-width:700px;max-height:92vh;overflow:auto;background:#fff;border-radius:16px 16px 0 0;padding:16px}
@media(min-width:700px){.modal{align-items:center}.modalbox{border-radius:16px;max-height:88vh}}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:10px;display:none;z-index:200;font-size:13px}
.drop{border:2px dashed #cbd5e1;border-radius:12px;padding:20px;text-align:center;background:#f8fafc;cursor:pointer}
.thumb{max-width:100%;max-height:200px;border-radius:8px;border:1px solid var(--line)}
.img-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.img-item{position:relative;width:60px;height:60px;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.img-item img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.img-item .del{position:absolute;top:0;right:0;background:rgba(0,0,0,.6);color:#fff;width:18px;height:18px;border-radius:0 6px 0 6px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.photo-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative}
.photo-card .photo-thumb{width:100%;height:140px;object-fit:cover;cursor:pointer;display:block}
.photo-card .photo-info{padding:8px}
.photo-card .photo-status{position:absolute;top:8px;left:8px}
.photo-card .photo-actions{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.photo-card .photo-date{font-size:11px;color:#999;margin-top:4px}
.cust-dropdown{position:absolute;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);max-height:200px;overflow:auto;z-index:60;width:100%}
.cust-dropdown div{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid #f3f4f6}
.cust-dropdown div:hover,.cust-dropdown div.sel{background:#eff6ff}
.cust-wrap{position:relative}
.prefix-tabs{display:flex;gap:6px;margin-bottom:10px}
.prefix-tabs button{flex:1;padding:10px 6px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;cursor:pointer}
.prefix-tabs button.active.z{background:var(--z);color:#fff;border-color:var(--z)}
.prefix-tabs button.active.sz{background:var(--sz);color:#fff;border-color:var(--sz)}
.prefix-tabs button.active.s{background:var(--s);color:#fff;border-color:var(--s)}
.prefix-tabs button.active.mds{background:var(--mds);color:#fff;border-color:var(--mds)}
.seq-info{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:8px 10px;font-size:12px;color:#0369a1;margin-bottom:10px}
.sand-box{background:#f0fdfa;border:1px solid #99f6e4;border-radius:8px;padding:10px;margin-bottom:10px}
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:8px 10px;display:flex;gap:8px;justify-content:center;z-index:40}
.bottom-bar .btn{flex:1;max-width:200px}
.img-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.img-modal.show{display:flex}.img-modal img{max-width:100%;max-height:90vh;border-radius:8px}
.img-modal .close{position:absolute;top:14px;right:14px;color:#fff;font-size:28px;cursor:pointer;background:rgba(0,0,0,.5);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.login-page{position:fixed;inset:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;z-index:500;padding:20px}
.login-box{background:#fff;border-radius:16px;padding:35px 30px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-box .field label{display:block;font-size:13px;color:#666;margin-bottom:5px;font-weight:500}
.login-box .field input{width:100%;padding:11px 14px;border:1px solid #ddd;border-radius:8px;font-size:15px;box-sizing:border-box;transition:border-color .2s}
.login-box .field input:focus{outline:none;border-color:#667eea}
.login-box .btn.primary{padding:12px;border:none;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;transition:opacity .2s}
.login-box .btn.primary:hover{opacity:.9}
/* 表格录入样式 */
.batch-table{border-collapse:collapse;font-size:13px}
.batch-table th{background:#f5f6fa;position:sticky;top:0;z-index:1;padding:6px 4px;border:1px solid #e0e0e0;text-align:center;font-weight:600;color:#555;white-space:nowrap}
.batch-table td{padding:0;border:1px solid #e8e8e8;background:#fff}
.batch-table td input{width:100%;border:none;padding:6px 4px;font-size:13px;background:transparent;outline:none;box-sizing:border-box;text-align:center}
.batch-table td input:focus{background:#e3f2fd;outline:2px solid #2196f3;outline-offset:-2px}
.batch-table td select{width:100%;border:none;padding:6px 2px;font-size:13px;background:transparent;outline:none;cursor:pointer}
.batch-table tr.selected td{background:#fff3e0}
.batch-table tr.selected td input{background:#fff3e0}
.batch-table .amt-cell{background:#f9fbe7;font-weight:600;color:#33691e}
.batch-table .cust-cell{background:#fce4ec;color:#880e4f;font-weight:500}
.batch-table .no-cust{color:#e74c3c;font-style:italic}
/* 分级权限：展示账户隐藏管理员功能 */
.role-viewer .admin-only{display:none !important}
.role-viewer .viewer-readonly{opacity:.6;pointer-events:none}
.role-viewer .nav button[data-page="entry"],
.role-viewer .nav button[data-page="import"]{display:none !important}
/* 员工角色：只显示录入页面 */
.role-reporter .nav button:not([data-page="reporter"]):not(.logout-btn){display:none !important}
.role-reporter .page:not(#page-reporter){display:none !important}
.role-reporter .kpi-row{display:none !important}
.role-reporter .card:not(.reporter-main){display:none !important}
.ocrout{background:#1f2937;color:#e5e7eb;padding:10px;border-radius:8px;white-space:pre-wrap;max-height:180px;overflow:auto;font-size:12px}
@media(max-width:640px){
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .kpi{font-size:18px}
  .table{min-width:700px}
  /* 手机端整体优化 */
  body{font-size:13px}
  .app{padding:6px 8px 70px}
  header{padding:5px 0 6px}
  h1{font-size:16px}
  .sub{font-size:10px}
  .nav button{padding:6px 8px;font-size:11px}
  .card{padding:10px;border-radius:10px}
  .card h3{font-size:14px;margin-bottom:8px}
  .field{margin-bottom:8px}
  label{font-size:11px;margin-bottom:3px}
  input,select,textarea{padding:10px 10px;font-size:15px} /* 15px防止iOS自动缩放 */
  .btn{padding:10px 12px;font-size:13px;min-height:40px}
  .btn.sm{padding:6px 10px;font-size:11px;min-height:auto}
  .table th,.table td{padding:6px 6px;font-size:11px}
  .modalbox{padding:14px;border-radius:12px 12px 0 0;max-height:94vh}
  .bottom-bar{padding:6px 8px;gap:6px}
  .bottom-bar .btn{max-width:none;font-size:13px;padding:10px 8px}
  .prefix-tabs button{padding:8px 4px;font-size:12px}
  .photo-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .photo-card .photo-thumb{height:110px}
  .batch-table{font-size:12px}
  .batch-table th,.batch-table td{padding:4px 2px}
  .batch-table td input,.batch-table td select{font-size:12px;padding:5px 2px}
  .kpi{font-size:20px}
  .badge{font-size:10px;padding:2px 6px}
  .notice,.warnbox{font-size:12px;padding:8px 10px}
  .seq-info{font-size:11px;padding:6px 8px}
  /* 员工端表单优化 */
  #page-reporter .field{margin-bottom:8px}
  #page-reporter input,#page-reporter select{font-size:15px;padding:10px}
  /* 照片选择器 */
  #batchPhotoPickerList{grid-template-columns:repeat(3,1fr)!important;gap:6px}
  /* 图片预览 */
  #repPhotoPreview img,#repVoidPhotoPreview img,#repReceiptPhotoPreview img{max-height:200px}
}
@media(max-width:400px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  body{font-size:12px}
  h1{font-size:15px}
  .nav button{padding:5px 7px;font-size:10px}
  .btn{font-size:12px;padding:9px 10px}
  .table{min-width:600px}
  .table th,.table td{font-size:10px;padding:5px 4px}
  #batchPhotoPickerList{grid-template-columns:repeat(2,1fr)!important}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
}
/* 横屏优化 */
@media(max-height:500px) and (orientation:landscape){
  .modalbox{max-height:96vh;padding:12px}
  .login-box{padding:20px}
  .login-box .field{margin-bottom:8px}
}
/* 确保所有表格都有横向滚动容器 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* 防止输入框在iOS上自动缩放（字体>=16px）*/
input[type="text"],input[type="number"],input[type="date"],input[type="tel"],select,textarea{font-size:16px}
@media(min-width:641px){
  input[type="text"],input[type="number"],input[type="date"],input[type="tel"],select,textarea{font-size:14px}
}
/* 客户页面专门优化：中等屏幕就变单列 */
@media(max-width:900px){
  #page-customers .g2{grid-template-columns:1fr}
  #page-customers .g2 > *{min-width:0;max-width:100%}
  #custList{max-height:40vh}
}
@media(max-width:640px){
  #page-customers .g2{grid-template-columns:1fr}
  #page-customers .g2 > *{min-width:0;max-width:100%;overflow:hidden}
  #page-customers{overflow-x:hidden}
  #custList{max-height:35vh}
  /* 关键：防止客户详情撑大页面 */
  #custDetail{overflow-x:hidden;max-width:100%;width:100%;min-width:0}
  #custDetail .g4{grid-template-columns:repeat(2,1fr);gap:6px}
  #custDetail .card{padding:6px 8px;max-width:100%;overflow:hidden}
  #custDetail .card h3,#custDetail .card b{font-size:12px;word-break:break-all}
  #custDetail .kpi{font-size:16px;margin:2px 0;word-break:break-all}
  #custDetail .muted.small{font-size:10px;word-break:break-all}
  #custDetail .table-wrap{margin:0 -4px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;width:100%}
  #custDetail table{font-size:11px;table-layout:auto}
  #custDetail table th,#custDetail table td{padding:3px 4px;word-break:keep-all;white-space:nowrap}
  #custDetail .btn{padding:3px 8px;font-size:11px}
  #custList .card{padding:6px 8px}
  #custList .card b{font-size:13px}
  #custList .small{font-size:11px}
  /* 工地筛选按钮换行 */
  #custDetail .row{flex-wrap:wrap;gap:4px}
}
@media(max-width:400px){
  #custDetail .g4{grid-template-columns:1fr}
  #custList{max-height:30vh}
  #custDetail .kpi{font-size:14px}
}
/* 确保所有动态生成的表格容器都能横向滚动 */
.card .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 客户详情KPI卡片在小屏幕下更紧凑 */
@media(max-width:640px){
  #custDetail .kpi{font-size:18px}
  #custDetail .card h3,#custDetail b{font-size:13px}
  /* 手机端隐藏次要列 */
  .hide-mobile{display:none !important}
  .cust-tx-table{min-width:300px}
  .cust-tx-table .badge{font-size:10px;padding:1px 4px}
}
@media(max-width:400px){
  .cust-tx-table{min-width:360px}
  .cust-tx-table td,.cust-tx-table th{padding:4px 2px;font-size:12px}
}
@media print{header,.nav,.bottom-bar,.no-print{display:none!important}body{background:#fff}.card{box-shadow:none;border:0}}
/* 环境标识 */
.env-test{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.env-prod{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.test-banner{background:linear-gradient(90deg,#fef3c7,#fde68a);color:#92400e;padding:6px 12px;text-align:center;font-size:12px;font-weight:600;border-bottom:1px solid #fde68a}

/* 收款弹窗表格手机端优化（只作用于收款弹窗，不影响其他表格） */
@media(max-width:640px){
  /* 隐藏已收列(第8列)和品类列(第4列)，表头和数据行都要隐藏 */
  .modal .table th:nth-child(8), .modal .table td:nth-child(8),
  .modal .table th:nth-child(4), .modal .table td:nth-child(4){display:none !important}
  #pAllocBody .pprice{width:60px;padding:6px 4px;font-size:14px;min-height:32px}
  #pAllocBody .palloc{width:70px;padding:6px 4px;font-size:14px;min-height:32px}
  #pAllocBody .pchk{width:20px;height:20px}
  #pAllocBody td{padding:6px 4px;font-size:12px}
  #pAllocBody th{padding:6px 4px;font-size:11px}
}
@media(max-width:400px){
  /* 超小屏隐藏数量列(第5列)，表头和数据行都要隐藏 */
  .modal .table th:nth-child(5), .modal .table td:nth-child(5){display:none !important}
  #pAllocBody .pprice{width:55px}
  #pAllocBody .palloc{width:60px}
}