/* 公共样式 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html, body { width: 100%; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); background: #f5f7fa; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

.container { max-width: 750px; margin: 0 auto; padding: 16px; padding-bottom: 80px; }
.title { font-size: 20px; font-weight: bold; text-align: center; margin: 10px 0 16px; }

/* 兼容App  */
html, body {
  -webkit-tap-highlight-color: transparent;
}

a, button, input, textarea, select, div {
  -webkit-tap-highlight-color: transparent !important;
  outline: none;
}

body {
  -webkit-user-select: none;
}

input, textarea {
  -webkit-user-select: text;
}

/* 顶部导航栏 */
.top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 12px 0; }
.back-btn { color: #007aff; text-decoration: none; font-size: 15px; }
.page-title { font-size: 18px; font-weight: bold; color: #333; }
.logout-btn {
  padding: 8px 16px;
  height: auto;
  border-radius: 6px;
  border: 1px solid #ff3b30;
  background: #fff;
  color: #ff3b30;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s;
  cursor: pointer;
}
.logout-btn:active {
  background: #ff3b30;
  color: #fff;
  opacity: 0.9;
}

/* 导航栏 */
.nav { display: flex; background: #fff; border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.nav a { flex: 1; height: 44px; line-height: 44px; text-align: center; font-size: 15px; color: #666; text-decoration: none; }
.nav a.active { background: #007aff; color: #fff; font-weight: bold; }

/* 表单样式 */
.input-box { margin-bottom: 14px; }
.input-box label { display: block; font-size: 14px; color: #666; margin-bottom: 6px; }
input, select, textarea { width: 100%; height: 46px; border-radius: 8px; border: 1px solid #ddd; padding: 0 12px; font-size: 16px; background: #fff; -webkit-appearance: none; appearance: none; color: #333; }
input[type="date"] { text-align: center; }
select { text-align: center; text-align-last: center; }
select option { color: #333; }
textarea { height: 160px; resize: none; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #007aff; }
input, select, textarea, table { -webkit-touch-callout: none; }

/* 按钮 */
.btn-group { display: flex; margin-bottom: 12px; }
.btn-group .btn { flex: 1; margin-right: 12px; }
.btn-group .btn:last-child { margin-right: 0; }
.btn { flex: 1; min-width: 80px; height: 44px; border-radius: 10px; border: none; font-size: 15px; font-weight: 500; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: all 0.2s; }
.btn:active { transform: scale(0.97); opacity: 0.8; }
.btn-blue { background: #007aff; color: #fff; }
.btn-green { background: #07c160; color: #fff; }
.btn-orange { background: #ff9500; color: #fff; }
.btn-gray { background: #8e8e93; color: #fff; }
.btn-red { background: #ff3b30; color: #fff; }
.btn-sm { height: 36px; font-size: 14px; min-width: 60px; flex: 0 0 auto; }

.total { text-align: right; font-size: 16px; font-weight: bold; margin: 10px 0; color: #333; }

/* 表格 */
.table-box { overflow-x: auto; border-radius: 8px; background: #fff; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 600px; border-collapse: collapse; border: 1px solid #e0e0e0; }
th, td { height: 44px; text-align: center; font-size: 14px; border: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; }
th { background: #f8f8f8; font-weight: bold; color: #333; border-top: none; border-left: none; }
td { color: #333; }
td:last-child { border-right: none; }
th:last-child { border-right: none; }

/* 无边框表格 */
table.no-border-table { border: none; position: relative; }
table.no-border-table th, table.no-border-table td { border: none; }
table.no-border-table th { border-bottom: 1px solid #e0e0e0; }
table.no-border-table td { padding: 6px 4px; }
table.no-border-table td:last-child { padding: 4px 6px; }
table.no-border-table tr { border-bottom: 1px solid #f0f0f0; }
table.no-border-table tr:last-child { border-bottom: none; }

/* 固定前两列 */
table.no-border-table th:nth-child(1),
table.no-border-table td:nth-child(1),
table.no-border-table th:nth-child(2),
table.no-border-table td:nth-child(2) {
  position: sticky;
  z-index: 10;
  background: #fff;
}

table.no-border-table th:nth-child(1),
table.no-border-table td:nth-child(1) {
  left: 0;
  /* border-right: 2px solid #e8e8e8; */
}

table.no-border-table th:nth-child(2),
table.no-border-table td:nth-child(2) {
  left: 50px;
  /* border-right: 2px solid #e8e8e8; */
}

table.no-border-table th:nth-child(1),
table.no-border-table th:nth-child(2) {
  z-index: 20;
  background: #f8f8f8;
  /* border-right: 2px solid #d8d8d8; */
}

/* 给固定列右侧添加阴影遮挡 */
table.no-border-table th:nth-child(1),
table.no-border-table td:nth-child(1) {
  /* box-shadow: 5px 0 10px -3px rgba(0, 0, 0, 0.15); */
}

table.no-border-table th:nth-child(2),
table.no-border-table td:nth-child(2) {
  /* box-shadow: 5px 0 10px -3px rgba(0, 0, 0, 0.15); */
}

table.no-border-table tbody tr:hover td:nth-child(1),
table.no-border-table tbody tr:hover td:nth-child(2) {
  background: #fafafa;
}

table.no-border-table tr.highlight td:nth-child(1),
table.no-border-table tr.highlight td:nth-child(2) {
  background: #e6f3ff !important;
  /* border-right: 2px solid #b3d9ff !important; */
}

.th-no { width: 50px; min-width: 50px; max-width: 50px; }
.th-name { width: 80px; min-width: 80px; max-width: 80px; }
.th-qty { width: 110px; }
.th-unit { width: 70px; }
.th-price { width: 110px; }
.th-amount { width: 160px; }
.th-remark { width: 140px; }
.th-action-index { width: 60px;}

/* 历史记录表格列宽 */
.th-date { width: 140px; }
.th-customer { width: 160px; }
.th-seller { width: 180px; }
.th-total { width: 100px; }
.th-action { width: 140px; }

/* 表格中的按钮样式 */
table .btn-group { margin-bottom: 0; }
table .btn-group .btn { margin-right: 6px; }
table .btn-group .btn:first-child { margin-left: 0; }
table .btn-group .btn:last-child { margin-right: 0; }
/* 表格操作列按钮贴近边框 */
table td:last-child .btn-group .btn:first-child { margin-left: 5px; }
table td:last-child .btn-group .btn:last-child { margin-right: 5px; }
table .btn-sm { padding: 0 16px; height: 36px; font-size: 13px; min-width: 60px; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }

td input { width: 100%; height: 34px; border-radius: 4px; text-align: center; border: 1px solid #d0d0d0; background: #fff8e6; font-size: 14px; }
td input[type="number"] { -moz-appearance: textfield; }
td input[type="number"]::-webkit-outer-spin-button, td input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
td input:focus { background: #fff; outline: none; border-color: #007aff; box-shadow: 0 0 0 2px rgba(0,122,255,0.1); }

/* 筛选 */
.filter-box { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.filter-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-row label { font-size: 15px; color: #333; font-weight: 500; width: 50px; }
.filter-row input { flex: 1; height: 42px; border-radius: 8px; border: 1px solid #e0e0e0; }
.filter-row input:focus { border-color: #007aff; outline: none; }

/* 列表项 */
.record-item { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.record-date { font-size: 13px; color: #007aff; font-weight: 600; margin-bottom: 10px; }
.record-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.record-customer { font-size: 16px; color: #333; font-weight: 600; flex: 1; }
.record-seller { font-size: 14px; color: #666; flex: 1; }
.record-amount { font-size: 18px; color: #ff3b30; font-weight: bold; margin-bottom: 12px; }
.record-actions { display: flex; gap: 8px; }

/* 汇总 */
.summary-box { background: #fff; border-radius: 10px; padding: 16px; margin-top: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.summary-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.summary-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.summary-item:last-child { border-bottom: none; }
.summary-item .customer { font-size: 15px; color: #333; }
.summary-item .amount { font-size: 15px; color: #ff3b30; font-weight: 600; }
.summary-total { background: linear-gradient(135deg, #007aff, #0055cc); color: #fff; border-radius: 10px; padding: 16px; margin-top: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0,122,255,0.3); }
.summary-total .label { font-size: 16px; font-weight: 500; }
.summary-total .value { font-size: 22px; font-weight: bold; }

/* 按销售方分组的汇总样式 */
.summary-seller-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #007aff; }
.summary-seller-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed #e0e0e0; }
.summary-seller-name { font-size: 16px; font-weight: 600; color: #333; }
.summary-seller-name::before { content: '🏪 '; }
.summary-seller-total { font-size: 16px; font-weight: 600; color: #ff6b00; }
.summary-customer-list { display: flex; flex-wrap: wrap; gap: 8px; }
.summary-customer-tag { background: linear-gradient(135deg, #f8f8f8, #f0f0f0); padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; }
.summary-customer-tag .name { font-weight: 500; color: #333; }
.summary-customer-tag .count { color: #999; font-size: 12px; }
.summary-customer-tag .amount { color: #ff3b30; font-weight: 600; }

/* 详情 */
.detail-header { background: #fff; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.detail-info { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #666; margin-bottom: 8px; }
.detail-info span { background: #f5f5f5; padding: 4px 10px; border-radius: 4px; }
.detail-info .float-right { margin-left: auto; }
.detail-info-row { display: flex; font-size: 15px; color: #666; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.detail-info-row:last-child { border-bottom: none; }
.detail-label { font-weight: 600; color: #333; min-width: 80px; }
.detail-value { flex: 1; color: #666; }

/* 弹框 */
.confirm-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 1000; }
.confirm-modal.show { display: flex; }
.confirm-box { background: #fff; width: 280px; border-radius: 12px; padding: 24px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.confirm-box p { font-size: 16px; color: #333; margin-bottom: 20px; line-height: 1.5; }
.confirm-btns { display: flex; gap: 12px; }
.confirm-btns button { flex: 1; height: 44px; border-radius: 8px; border: none; font-size: 15px; -webkit-tap-highlight-color: transparent; }
.confirm-btns .cancel { background: #f0f0f0; color: #666; }
.confirm-btns .ok { background: #07c160; color: #fff; }

/* 加载 */
.loading { text-align: center; padding: 40px; color: #999; }
.empty { text-align: center; padding: 40px; color: #999; font-size: 14px; }

/* 表格行高亮 */
table tr.highlight { background: #e6f3ff !important; }
table tr.highlight td { border-color: #b3d9ff !important; }

/* 返回 */
.back-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: #007aff; margin-bottom: 12px; }
.back-btn:active { opacity: 0.7; }

/* 只读表格 */
.readonly td { background: #fafafa; }
.readonly td input { background: #f0f0f0; pointer-events: none; }

/* 新增单条记录表单 */
.add-item-box { background: #fff; border-radius: 10px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.add-item-title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; }
.add-item-row { display: flex; flex-wrap: wrap; align-items: center; }
.add-item-row .input-text,
.add-item-row .input-number,
.add-item-row .input-text-sm { height: 36px; border-radius: 8px; border: 1px solid #ddd; padding: 0 12px; font-size: 14px; background: #fff; -webkit-appearance: none; margin-bottom: 8px; }
.add-item-row .input-text { flex: 2; min-width: 100px; margin-right: 8px; }
.add-item-row .input-number { flex: 1; min-width: 70px; text-align: center; margin-right: 8px; }
.add-item-row .input-text-sm { flex: 0 0 60px; text-align: center; margin-right: 8px; }
.add-item-row .btn-sm { flex: 0 0 auto; min-width: 70px; height: 36px; margin-bottom: 8px; }
.add-item-row .input-text:focus,
.add-item-row .input-number:focus,
.add-item-row .input-text-sm:focus { outline: none; border-color: #007aff; box-shadow: 0 0 0 2px rgba(0,122,255,0.1); }

/* 回到顶部 */
.back-to-top { position: fixed; right: 16px; bottom: 80px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,122,255,0.9); color: #fff; border: none; font-size: 20px; cursor: pointer; display: none; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 100; }
.back-to-top.show { display: flex; }

/* 刷新页面悬浮按钮 */
.refresh-btn { position: fixed; right: 16px; bottom: 135px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,149,0,0.9); color: #fff; border: none; font-size: 18px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 100; transition: transform 0.2s, opacity 0.2s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.refresh-btn:active { transform: scale(0.97); opacity: 0.8; }
.refresh-btn.loading { animation: spin 1s linear infinite; pointer-events: none; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }