/* 发票整理 — 样式（自包含，类名统一 is- 前缀） */

:root {
  --is-primary: #2563eb;
  --is-primary-dark: #1d4ed8;
  --is-primary-light: #eff6ff;
  --is-bg: #f5f7fb;
  --is-card: #ffffff;
  --is-text: #1e293b;
  --is-text-sub: #64748b;
  --is-border: #e2e8f0;
  --is-radius: 14px;
  --is-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden 属性必须始终生效（防止 display:grid/flex 等样式盖过它） */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--is-bg);
  color: var(--is-text);
  min-height: 100vh;
}

/* ---------- 头部（紧凑版：不遮挡下方统计卡） ---------- */
.is-header {
  position: relative;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #fff;
  padding: 14px 20px 18px;
  border-radius: 0 0 22px 22px;
}

.is-back {
  display: inline-block;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 8px;
}
.is-back:hover { color: #fff; }

.is-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-title-row h1 { font-size: 20px; font-weight: 700; letter-spacing: .5px; }

.is-badge {
  font-size: 11px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .4);
  padding: 2px 9px;
  border-radius: 999px;
}

/* ---------- 主体 ---------- */
.is-main { max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; }

/* ---------- 两栏布局：左侧固定汇总 + 右侧内容 ---------- */
.is-layout {
  display: grid;
  grid-template-columns: 225px 1fr;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}
.is-sidebar {
  position: sticky;
  top: 12px;
  background: #fff;
  border-radius: var(--is-radius);
  box-shadow: var(--is-shadow);
  padding: 14px 12px;
}
.is-sidebar-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }

/* 侧栏分类收款卡片 */
.is-pay-card { border-top: 1px solid var(--is-border); padding: 8px 2px; }
.is-pay-card:first-child { border-top: none; }
.is-pay-head { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 5px; }
.is-pay-head span { font-weight: 600; }
.is-pay-head b { color: var(--is-text-sub); font-weight: 600; font-size: 11px; }
.is-pay-head em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 13px; color: var(--is-text); }
.is-pay-card.uncat .is-pay-head span,
.is-pay-card.uncat .is-pay-head em { color: #c2410c; }
.is-pay-inputs { display: grid; gap: 4px; }
.is-pay-input {
  width: 100%;
  border: 1px solid var(--is-border);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  background: #fff;
  font-family: inherit;
}
.is-pay-input:focus { outline: 2px solid #bfdbfe; border-color: var(--is-primary); }
.is-pay-total {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  border-top: 2px solid var(--is-border);
  margin-top: 6px;
  padding: 8px 2px 0;
}
.is-pay-total em { margin-left: auto; font-style: normal; font-size: 14px; font-weight: 800; }
.is-content { min-width: 0; }
.is-content .is-upload { margin-top: 0; }

/* ---------- 警告横幅 ---------- */
.is-warn {
  margin-top: 14px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
}

/* ---------- 统计卡片（紧凑 + 滚动时常驻；待核对/有问题数量>0 时变色引导点击） ---------- */
.is-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--is-bg);
  padding: 8px 0;
}
.is-stat {
  background: var(--is-card);
  border-radius: 10px;
  box-shadow: var(--is-shadow);
  padding: 8px 6px;
  text-align: center;
}
.is-stat.hl { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; }
.is-stat-num { font-size: 18px; font-weight: 800; }
.is-stat.hl .is-stat-num { font-size: 17px; }
.is-stat-label { display: block; margin-top: 2px; font-size: 10px; color: var(--is-text-sub); }
.is-stat.hl .is-stat-label { color: rgba(255, 255, 255, .85); }
.is-stat-pending.has-items, .is-stat-problem.has-items { cursor: pointer; }
.is-stat-pending.has-items {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .45);
}
.is-stat-problem.has-items {
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, .45);
}
.is-stat-pending.has-items .is-stat-label,
.is-stat-problem.has-items .is-stat-label { color: rgba(255, 255, 255, .9); }

/* ---------- 上传区 ---------- */
.is-upload {
  margin-top: 16px;
  border: 2px dashed #c3d4f7;
  background: #f8fbff;
  border-radius: 16px;
  padding: 30px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.is-upload:hover, .is-upload.dragover { border-color: var(--is-primary); background: var(--is-primary-light); }
.is-upload-icon { font-size: 32px; }
.is-upload p { margin-top: 8px; font-size: 15px; font-weight: 600; }
.is-upload span { display: block; margin-top: 4px; font-size: 12px; color: var(--is-text-sub); }

/* ---------- 识别队列 ---------- */
.is-section-title { font-size: 14px; font-weight: 700; color: var(--is-text-sub); margin: 18px 2px 10px; }

.is-queue-list { display: grid; gap: 8px; }
.is-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--is-card);
  border: 1px solid var(--is-border);
  border-radius: 12px;
  padding: 10px 14px;
}
.is-queue-name {
  flex: 1;
  min-width: 160px;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-queue-status { font-size: 13px; color: var(--is-text-sub); flex: none; }
.is-queue-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ---------- 快速跳转栏（sticky，位于常驻统计栏下方） ---------- */
.is-jumpbar {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: var(--is-bg);
  padding: 8px 0 6px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.is-group, .is-groups { scroll-margin-top: 124px; }
.is-jump {
  flex: none;
  border: 1px solid var(--is-border);
  background: #fff;
  color: var(--is-text-sub);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12px;
  cursor: pointer;
}
.is-jump b { margin-left: 3px; }
.is-jump.uncat { background: #fff7ed; border-color: #fed7aa; color: #c2410c; }
.is-jump.uncat b { color: #c2410c; }
.is-jump.dim { opacity: .45; cursor: default; }

/* ---------- 状态筛选 ---------- */
.is-tabs { display: flex; gap: 8px; margin: 14px 0 12px; flex-wrap: wrap; }
.is-tab {
  border: 1px solid var(--is-border);
  background: #fff;
  color: var(--is-text-sub);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  cursor: pointer;
}
.is-tab b { margin-left: 3px; }
.is-tab.active { background: var(--is-primary); border-color: var(--is-primary); color: #fff; }

/* ---------- 分组折叠列表 ---------- */
.is-groups { display: grid; gap: 12px; }
.is-group {
  background: #fff;
  border-radius: var(--is-radius);
  box-shadow: var(--is-shadow);
  overflow: hidden;
}
.is-group summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
}
.is-group summary::-webkit-details-marker { display: none; }
.is-group-arrow { transition: transform .2s; font-size: 11px; color: var(--is-text-sub); flex: none; }
.is-group[open] .is-group-arrow { transform: rotate(90deg); }
.is-group-name { font-weight: 700; font-size: 15px; }
.is-group-badge { background: var(--is-primary-light); color: var(--is-primary-dark); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.is-group-subtotal { margin-left: auto; font-size: 14px; color: #0f172a; font-weight: 800; }
.is-group.uncat summary { background: #fff7ed; }
.is-group.uncat .is-group-badge { background: #ffedd5; color: #c2410c; }

/* 折叠组头淡彩色区分（按分类） */
.is-group.cat-1 summary { background: #eff6ff; }   /* 住宿费 淡蓝 */
.is-group.cat-2 summary { background: #f0fdf4; }   /* 场地费 淡绿 */
.is-group.cat-3 summary { background: #fff7ed; }   /* 餐饮费 淡橙 */
.is-group.cat-4 summary { background: #fdf2f8; }   /* 水果/点心/饮品 淡粉 */
.is-group.cat-5 summary { background: #fefce8; }   /* 交通费 淡黄 */
.is-group.cat-6 summary { background: #f5f3ff; }   /* 会务/租车/印刷 淡紫 */
.is-group.cat-7 summary { background: #f8fafc; }   /* 其他 淡灰 */
.is-group-body { padding: 0 16px 14px; display: grid; gap: 10px; }

.is-empty { text-align: center; color: #94a3b8; padding: 30px 0; font-size: 13px; }

/* ---------- 发票卡片 ---------- */
.is-item {
  position: relative;
  border: 1px solid var(--is-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fbfdff;
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.is-item-main { flex: 1; min-width: 0; display: grid; gap: 9px; }
.is-item-confirm { flex: none; display: flex; align-items: center; }
.is-confirm-btn {
  width: 64px;
  min-height: 100%;
  border: none;
  border-radius: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  padding: 10px 4px;
  box-shadow: 0 2px 8px rgba(22, 163, 74, .35);
  font-family: inherit;
}
.is-confirm-btn:hover { background: #15803d; }
.is-confirm-btn.done { background: #d1fae5; color: #047857; cursor: default; box-shadow: none; }
.is-item.problem { border-color: #fca5a5; background: #fff7f7; }

.is-item-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.is-check { flex: none; display: flex; align-items: center; }
.is-check input { width: 16px; height: 16px; cursor: pointer; }

.is-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 20px;
  overflow: hidden;
}
.is-thumb img { width: 100%; height: 100%; object-fit: cover; }

.is-type {
  font-size: 12px;
  color: var(--is-primary-dark);
  background: var(--is-primary-light);
  padding: 2px 8px;
  border-radius: 6px;
  flex: none;
}
.is-file-name {
  flex: 1;
  min-width: 100px;
  font-size: 12px;
  color: var(--is-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-item-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }

.is-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; flex: none; }
.is-tag.pending { color: #b45309; background: #fef3c7; }
.is-tag.done { color: #047857; background: #d1fae5; }
.is-tag.problem { color: #b91c1c; background: #fee2e2; }
.is-tag.need-list { color: #92400e; background: #fef3c7; }

.is-fields { display: grid; grid-template-columns: 120px 120px 140px 1fr; gap: 8px; align-items: end; }
.is-field label { display: block; font-size: 11px; color: var(--is-text-sub); margin-bottom: 3px; }

/* 锁定态字段只读展示 */
.is-fields-view { display: flex; gap: 16px; flex-wrap: wrap; }
.is-view-item { display: flex; flex-direction: column; gap: 2px; }
.is-view-item label { font-size: 10px; color: var(--is-text-sub); }
.is-view-item span { font-size: 13px; font-weight: 600; }
.is-view-item .is-amount-view { font-size: 16px; font-weight: 800; color: var(--is-text); }

.is-input, .is-select {
  width: 100%;
  border: 1px solid var(--is-border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  background: #fff;
  color: var(--is-text);
  font-family: inherit;
}
.is-input:focus, .is-select:focus { outline: 2px solid #bfdbfe; border-color: var(--is-primary); }
.is-input.guess { background: #fffbeb; border-color: #fcd34d; }
.is-amount-input { font-weight: 800; font-size: 15px; color: var(--is-text); }
.is-input-no { font-size: 12px; color: var(--is-text-sub); }

.is-buyer { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--is-text-sub); }
.is-buyer-no { color: #94a3b8; }
.is-buyer .ok { color: #047857; font-weight: 600; }
.is-buyer .bad { color: #b91c1c; font-weight: 700; }
.is-buyer .missing { color: #94a3b8; }

.is-notes { font-size: 12px; color: #b45309; background: #fffbeb; border-radius: 8px; padding: 6px 9px; }
.is-notes.dim { color: #64748b; background: #f1f5f9; }
.is-recog-err { font-size: 12px; color: #b91c1c; background: #fef2f2; border-radius: 8px; padding: 6px 9px; width: 100%; }

.is-filelost {
  font-size: 12px;
  color: #b45309;
  background: #fff7ed;
  border: 1px dashed #fdba74;
  border-radius: 8px;
  padding: 8px 9px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.is-attach-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.is-attach {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
}
.is-attach-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-attach-role { color: var(--is-primary-dark); font-weight: 600; flex: none; }
.is-attach-del { border: none; background: none; color: #94a3b8; cursor: pointer; font-size: 14px; line-height: 1; }
.is-attach-del:hover { color: #b91c1c; }

/* ---------- 附件池 ---------- */
.is-pool-list { display: grid; gap: 8px; }
.is-attach-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  background: #f1f5f9;
  display: grid;
  gap: 5px;
  box-shadow: none;
}
.is-attach-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.is-attach-icon { flex: none; font-size: 14px; }
.is-attach-meta {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  background: #fff;
  border: 1px solid var(--is-border);
  border-radius: 8px;
  padding: 3px 8px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.is-attach-fields { display: grid; grid-template-columns: 110px 1fr; gap: 6px; align-items: end; }
.is-attach-card .is-field label { font-size: 10px; }
.is-attach-card .is-select { padding: 3px 6px; font-size: 12px; }
.is-attach-card .is-filelost { padding: 4px 8px; font-size: 11px; }

/* ---------- 操作栏 ---------- */
.is-actionbar {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--is-card);
  border-radius: var(--is-radius);
  box-shadow: var(--is-shadow);
  padding: 14px 16px;
}
.is-selectall { font-size: 14px; color: var(--is-text-sub); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.is-batch { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--is-text-sub); }
.is-batch select { border: 1px solid var(--is-border); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.is-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.is-btn {
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.is-btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.is-btn.primary { background: var(--is-primary); color: #fff; }
.is-btn.primary:hover { background: var(--is-primary-dark); }
.is-btn.ghost { background: #fff; color: var(--is-text-sub); border: 1px solid var(--is-border); }
.is-btn.ghost:hover { border-color: var(--is-primary); color: var(--is-primary); }
.is-btn.danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.is-btn.danger:hover { background: #fee2e2; }

.is-spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #bfdbfe;
  border-top-color: var(--is-primary);
  border-radius: 50%;
  animation: is-rot .8s linear infinite;
  vertical-align: -2px;
  margin-right: 4px;
}
@keyframes is-rot { to { transform: rotate(360deg); } }

/* ---------- 右侧浮动操作流程帮助 ---------- */
.is-help-fab {
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 70;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--is-primary);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .4);
}
.is-help-panel {
  position: fixed;
  right: 16px;
  bottom: 146px;
  z-index: 70;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, .25);
  padding: 14px 16px;
}
.is-help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 14px; }
.is-help-close { border: none; background: none; font-size: 18px; color: #94a3b8; cursor: pointer; line-height: 1; }
.is-help-close:hover { color: #b91c1c; }
.is-welcome-list { margin: 0; padding-left: 20px; line-height: 1.9; font-size: 13px; display: grid; gap: 4px; }
.is-welcome-list b { color: var(--is-primary-dark); }

/* ---------- toast ---------- */
.is-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, .92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 60;
  max-width: 90vw;
}

.is-footnote { margin-top: 24px; text-align: center; font-size: 12px; color: #94a3b8; }

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .is-stats { grid-template-columns: repeat(2, 1fr); position: static; }
  .is-jumpbar { top: 0; }
  .is-layout { grid-template-columns: 1fr; }
  .is-sidebar { position: static; order: 2; }
  .is-content { order: 1; }
  .is-fields { grid-template-columns: 1fr 1fr; }
  .is-fields .is-field:first-child { grid-column: 1 / -1; }
  .is-attach-fields { grid-template-columns: 1fr; }
  .is-actionbar { flex-direction: column; align-items: stretch; }
  .is-actions { justify-content: flex-end; }
}