/* ========== 全局重置 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pri:#1a1a2e;--pri2:#2c3e6b;--acc:#4ecdc4;--acc2:#2ecc71;
  --red:#e74c3c;--text:#333;--text2:#666;--bg:#f0f2f5;
  --card:#fff;--bor:#e0e0e0;--radius:10px;--shadow:0 2px 12px rgba(0,0,0,.08);
}
body{font-family:FangSong,"仿宋","Microsoft YaHei",serif;font-size:14px;color:var(--text);background:var(--bg);min-height:100vh}
a{color:var(--pri);text-decoration:none}a:hover{color:var(--acc)}
img{max-width:100%}

/* ========== 按钮 ========== */
.btn{display:inline-block;padding:10px 22px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;text-align:center;transition:.15s;line-height:1.4}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-primary{background:var(--pri);color:#fff}
.btn-success{background:var(--acc2);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-warning{background:#f39c12;color:#fff}
.btn-info{background:#3498db;color:#fff}
.btn-outline{background:transparent;border:1px solid var(--bor);color:var(--text)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-block{width:100%}

/* ========== 顶部导航 ========== */
.navbar{
  background:var(--pri);color:#fff;padding:0 16px;height:50px;
  display:flex;align-items:center;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.2);
  position:sticky;top:0;z-index:100
}
.navbar .brand{font-weight:bold;font-size:15px;white-space:nowrap}
.navbar .nav-links{margin-left:auto;display:flex;gap:4px;align-items:center}
.navbar .nav-links a,.navbar .nav-links span{color:#ccc;font-size:13px;padding:6px 10px;border-radius:4px;transition:.15s;white-space:nowrap}
.navbar .nav-links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.navbar .nav-links .user-name{color:var(--acc);font-weight:500}
.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px}

/* ========== 认证页面 ========== */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);padding:16px}
.auth-container{width:100%;max-width:420px}
.auth-card{background:var(--card);border-radius:16px;padding:36px 28px;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.auth-header{text-align:center;margin-bottom:24px}
.auth-logo{font-size:16px;font-weight:bold;color:var(--pri);margin-bottom:4px}
.auth-header h2{font-size:22px;color:var(--pri)}
.auth-form .form-group{margin-bottom:16px}
.auth-form .form-group label{display:block;margin-bottom:4px;font-size:13px;color:var(--text2);font-weight:500}
.auth-form .form-group input{width:100%;padding:10px 14px;border:2px solid var(--bor);border-radius:8px;font-size:14px;outline:none;transition:.15s}
.auth-form .form-group input:focus{border-color:var(--acc)}
.auth-form .form-row{display:flex;gap:12px}
.auth-form .form-row .form-group{flex:1}
.auth-footer{text-align:center;margin-top:18px;font-size:13px;color:var(--text2)}
.req{color:var(--red)}
.alert{padding:10px 14px;border-radius:6px;margin-bottom:16px;font-size:13px}
.alert-error{background:#fde8e8;color:#c62828;border:1px solid #f5c6cb}

/* ========== 页面容器 ========== */
.page-content{max-width:960px;margin:0 auto;padding:16px}

/* ========== 卡片 ========== */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.card-title{font-size:16px;font-weight:bold;margin-bottom:12px;color:var(--pri)}

/* ========== 我的记录表格 ========== */
.data-table{width:100%;border-collapse:collapse;font-size:13px}
.data-table th{background:#f8f9fa;padding:10px 8px;text-align:left;font-weight:600;border-bottom:2px solid var(--bor);white-space:nowrap}
.data-table td{padding:8px;border-bottom:1px solid var(--bor)}
.data-table tr:hover td{background:#fafbfc}
.status-badge{padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap;display:inline-block}
.status-submitted{background:#e3f2fd;color:#1565c0}
.status-processing{background:#fff3e0;color:#e65100}
.status-completed{background:#e8f5e9;color:#2e7d32}
.status-rejected{background:#fce4ec;color:#c62828}
.badge-active{background:#e8f5e9;color:#2e7d32}
.badge-disabled{background:#fce4ec;color:#c62828}

.empty-state{text-align:center;padding:40px 20px;color:#999}
.actions{display:flex;gap:6px;flex-wrap:wrap}

/* ========== 委托单表单（A4 模拟） ========== */
.form-toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.form-page{
  background:#fff;padding:12.7mm;box-shadow:0 2px 16px rgba(0,0,0,.15);
  margin-bottom:20px;max-width:210mm;margin-left:auto;margin-right:auto;
  position:relative;min-height:271.6mm;
}
.form-page .page-header{margin-bottom:3mm}
.form-page .page-header .hdr-top{display:flex;align-items:center;gap:6mm;padding-bottom:2mm;border-bottom:2px solid var(--pri);margin-bottom:2mm}
.form-page .page-header .hdr-logo{width:10mm;height:10mm;object-fit:contain}
.form-page .page-header .hdr-info{flex:1;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:6mm}
.form-page .page-header .company{font-size:12pt;font-weight:bold}
.form-page .page-header .title-row{display:flex;align-items:baseline;position:relative;margin:1mm 0;min-height:18pt}
.form-page .page-header .title-row .title{font-size:16pt;font-weight:bold;text-align:center;flex:1;margin:0}
.form-page .page-header .title-row .serial-no{position:absolute;right:0;bottom:0;font-size:9pt;text-align:right;font-weight:normal;white-space:nowrap;color:#555;margin:0}
.form-page .page-header .company-en{font-size:7.5pt;color:#666;letter-spacing:.5px;margin-top:1mm}
.form-page .page-header .code-row{font-size:8pt;margin-top:0;text-align:right;white-space:nowrap}
.form-page .form-table td{height:9mm}
.form-page .form-table td[colspan]{height:auto}

.form-table{width:100%;border-collapse:collapse;table-layout:fixed}
.form-table td,.form-table th{border:1px solid #333;padding:3px 4px;vertical-align:middle;font-size:10pt;word-break:break-all;height:9mm;min-height:9mm}
.form-table td[colspan]{height:auto}
.form-table .sec-hd td{background:#f0f0f0;font-weight:bold;text-align:center;padding:4px 6px;font-size:10.5pt}
.form-table .lbl-rq{color:#c00;font-weight:bold}

.inp-txt{width:100%;border:none;border-bottom:1px dashed #bbb;font-size:10pt;padding:1px 3px;background:transparent;outline:none;font-family:inherit}
.inp-txt:focus{border-bottom-color:#2980b9;background:#fef9e7}
.inp-txt[readonly]{background:#f5f5f5;color:#888}
.sample-row td{text-align:center;padding:2px 4px;height:9mm}
.sample-row td .inp-txt{font-size:10pt}
.sample-row input[type="checkbox"]{width:18px;height:18px}
.chk-inline input[type="radio"],.chk-inline input[type="checkbox"]{width:16px;height:16px;vertical-align:middle;margin-right:3px}

.review-table{width:100%;border-collapse:collapse;margin-top:4mm}
.review-table td{border:1px solid #333;padding:2px 4px;font-size:8pt}
.review-table .sec-hd td{background:#f0f0f0;font-weight:bold;text-align:center;font-size:10pt;padding:4px 6px}
.sign-area{display:table;width:100%;margin-top:2mm}
.sign-area .sf-left{display:table-cell;text-align:left;white-space:nowrap}
.sign-area .sf-right{display:table-cell;text-align:right;white-space:nowrap}
.sign-area .sign-line{display:inline-block;min-width:14ch;border-bottom:1px solid #000;padding:0 4px}
.page-note{text-align:left;font-size:8pt;color:#666;margin-top:3mm}

.notes-page .notes-title{font-weight:bold;font-size:11pt;margin:4mm 0 2mm}
.notes-page .notes-list{padding-left:2em;font-size:9.5pt;line-height:1.5}
.notes-page .notes-list li{margin-bottom:1.5mm}
.notes-page .notes-warning{margin-top:4mm;font-size:9pt;color:#333;line-height:1.4}
.note-red{color:#c00}
.page-footer-line{position:absolute;left:12.7mm;right:12.7mm;bottom:10mm;border-top:1px solid #000}
.page-num{position:absolute;bottom:6mm;right:12.7mm;font-size:9pt;color:#333;text-align:right}

/* ── 多选组件 ── */
.multi-sel{position:relative}
.ms-display{font-size:9pt;padding:2px 4px;border:1px solid #ccc;border-radius:4px;cursor:pointer;background:#fff;min-height:20px;max-height:48px;overflow-y:auto;word-break:break-all;color:#999}
.ms-display:hover{border-color:#2980b9}
.ms-popup{display:none;position:absolute;z-index:999;top:100%;left:0;min-width:180px;max-width:280px;max-height:260px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px}
.ms-popup.open{display:block}
.ms-grid{display:flex;flex-wrap:wrap;gap:2px}
.ms-grid label:hover{background:#e8f5e9;border-radius:3px}
@media print{
.ms-display{border:none;color:#1a1a2e;font-size:10pt}
}

/* ========== 打印样式 ========== */
@media print{
  @page{size:A4;margin:0}
  .no-print{display:none!important}
  body{background:#fff!important;padding:0!important}
  .form-page{box-shadow:none!important;margin:0!important;padding:8mm 12.7mm 12.7mm 12.7mm!important;max-width:100%!important;page-break-after:auto;min-height:271.6mm}
  .form-page.notes-page{page-break-before:always}
  .form-table{page-break-inside:avoid;break-inside:avoid}
  .review-table{page-break-inside:avoid;break-inside:avoid}
  .sample-row input[type="file"]{display:none!important}
  .inp-txt{border-bottom:none!important;background:transparent!important}
  input[type="checkbox"],input[type="radio"]{-webkit-appearance:auto!important}
  .company-en{display:none!important}
  .hdr-logo{display:inline-block!important;width:10mm;height:10mm;object-fit:contain}
  .hdr-logo-print{display:none!important}
  .form-page:last-child .page-footer-line{display:none}
}

/* ========== 动态样品行 增/删按钮 ========== */
.btn-add-row{
  display:inline-block;padding:3px 10px;font-size:11px;background:var(--acc);
  color:#000;border:none;border-radius:3px;cursor:pointer;font-weight:500;
}
.btn-add-row:hover{background:#3bb8b0}
.btn-del-row{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;line-height:14px;
  font-size:14px;background:var(--red);color:#fff;border:none;border-radius:50%;
  cursor:pointer;text-align:center;padding:0;font-weight:bold;
}
.btn-del-row:hover{background:#c0392b}
.btn-copy-row{
  width:22px;height:22px;line-height:18px;
  font-size:13px;background:#e0f7fa;color:#00695c;border:1px solid #80cbc4;
  border-radius:4px;cursor:pointer;text-align:center;padding:0;
}
.btn-copy-row:hover{background:#b2ebf2}
tr.sample-row:first-of-type .btn-copy-row{display:none}
.sample-serial{position:relative}

/* ========== 后台统计 ========== */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.stat-card{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.stat-card .icon{font-size:32px}
.stat-card .num{font-size:26px;font-weight:bold}
.stat-card .label{font-size:12px;color:var(--text2)}

/* ========== 搜索栏 ========== */
.search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.search-bar input,.search-bar select{padding:8px 12px;border:1px solid var(--bor);border-radius:6px;font-size:13px;outline:none}
.search-bar input:focus,.search-bar select:focus{border-color:var(--acc)}
.search-bar input{flex:1;min-width:180px}

/* ========== 分页 ========== */
.pagination{display:flex;justify-content:center;gap:4px;padding:16px 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:6px 14px;border:1px solid var(--bor);border-radius:4px;font-size:13px;transition:.15s}
.pagination a:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.pagination .current{background:var(--pri);color:#fff;border-color:var(--pri)}
.pagination .info{color:var(--text2);margin-left:10px;align-self:center}

/* ========== 弹窗 ========== */
.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:200;align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-box{background:#fff;border-radius:12px;padding:24px;min-width:280px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.2)}
.modal-box h3{margin-bottom:14px}
.modal-box select{width:100%;padding:8px;border:1px solid var(--bor);border-radius:6px;margin-bottom:14px}
.modal-box .btn-row{display:flex;gap:10px;justify-content:flex-end}

/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
  .navbar{height:44px;padding:0 10px}
  .navbar .brand{font-size:13px}
  .navbar .nav-links a,.navbar .nav-links span{font-size:11px;padding:4px 6px}
  .page-content{padding:10px}
  .card{padding:14px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat-card{padding:12px;gap:8px}
  .stat-card .icon{font-size:24px}
  .stat-card .num{font-size:20px}

  .data-table{font-size:11px}
  .data-table th,.data-table td{padding:6px 4px}
  .data-table .hide-mobile{display:none}

  .auth-card{padding:24px 16px}
  .auth-form .form-row{flex-direction:column;gap:0}

  .form-page{padding:4mm;font-size:9pt}
  .form-table td,.form-table th{padding:2px;font-size:8pt}
  .form-table .sec-hd td{font-size:9pt}
  .form-page .page-header .title{font-size:14pt}
  .inp-txt{font-size:8pt}
  .sample-row td{height:18px;padding:1px}
  .sample-row td .inp-txt{font-size:7pt}
  .chk-inline{font-size:7pt}
  .sign-area{flex-direction:column;gap:6px}
}

@media (max-width: 480px) {
  .btn{padding:8px 14px;font-size:13px}
  .form-toolbar{flex-direction:column;align-items:stretch}
  .form-toolbar .btn{width:100%}
  .search-bar{flex-direction:column}
  .search-bar input{width:100%}
  .search-bar select{width:100%}
  .stats{grid-template-columns:1fr 1fr}
  .data-table .hide-mobile{display:none}
  .data-table .hide-small{display:none}
}