/* styles.css — 信息部账本：移动端优先，大字、大按钮 */
:root {
  --navy: #16324f;
  --navy-2: #1f4265;
  --orange: #e8722a;
  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #7a8699;
  --line: #e3e7ec;
  --red: #d64541;
  --green: #2e9e5b;
  --yellow: #d98e04;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 17px; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior-y: none;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

.boot { padding: 60px 24px; text-align: center; color: var(--muted); }

/* ---------- 布局 ---------- */
#app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.page { padding: 14px 14px 24px; max-width: 560px; margin: 0 auto; }

.page-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.page-title { font-size: 1.3rem; font-weight: 700; }
.back { font-size: 1.8rem; line-height: 1; color: var(--navy); padding: 2px 10px 4px 2px; }

/* ---------- 底部 Tab ---------- */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(64px + env(safe-area-inset-bottom));
}
#tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 0.78rem; color: var(--muted);
}
#tabbar a .ti { font-size: 1.3rem; line-height: 1; }
#tabbar a.on { color: var(--navy); font-weight: 700; }
#tabbar a.tab-new { position: relative; }
#tabbar a.tab-new .ti {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; margin-top: -26px;
  box-shadow: 0 4px 12px rgba(232, 114, 42, 0.4);
}

/* ---------- 首页 ---------- */
.home-head { padding: 8px 2px 14px; }
.home-date { font-size: 1.5rem; font-weight: 800; color: var(--navy); }
.home-app { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }

.backup-warn {
  display: block; background: #fdf3e3; border: 1px solid #f0d9a8; color: #8a6410;
  padding: 12px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 0.95rem;
}

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-card {
  background: var(--card); border-radius: var(--radius); padding: 14px;
  box-shadow: 0 1px 3px rgba(22, 50, 79, 0.06);
}
.stat-card:first-child { grid-column: 1 / -1; }
.stat-label { color: var(--muted); font-size: 0.85rem; }
.stat-num { font-size: 1.9rem; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-num.red { color: var(--red); }
.stat-num.yellow { color: var(--yellow); font-size: 1.5rem; }
.stat-sub { color: var(--muted); font-size: 0.72rem; margin-top: 2px; }

.big-add {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  font-size: 1.35rem; font-weight: 800; letter-spacing: 2px;
  border-radius: var(--radius); padding: 20px; margin: 14px 0;
  box-shadow: 0 4px 14px rgba(22, 50, 79, 0.3);
}
.big-add:active { transform: scale(0.98); background: var(--navy-2); }

.home-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.home-card { background: var(--card); border-radius: var(--radius); padding: 12px; text-align: center; }
.hc-label { color: var(--muted); font-size: 0.78rem; }
.hc-main { font-size: 1.15rem; font-weight: 800; margin-top: 4px; }
.hc-sub { color: var(--muted); font-size: 0.72rem; margin-top: 2px; }

.home-tip { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 16px; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 10px; }
.form-warn {
  background: #fdf3e3; border: 1px solid #f0d9a8; color: #8a6410;
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 0.9rem;
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f-item {
  background: var(--card); border-radius: var(--radius); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.f-item > span { color: var(--muted); font-size: 0.8rem; }
.f-item input {
  border: none; outline: none; font-size: 1.15rem; font-family: inherit;
  background: transparent; width: 100%; color: var(--text); padding: 2px 0;
}
.f-item input::placeholder { color: #b6bfca; }
.f-picker { flex-direction: row; align-items: center; justify-content: space-between; min-height: 60px; }
.f-picker::after { content: '›'; color: var(--muted); font-size: 1.3rem; }
.f-value { font-size: 1.15rem; font-weight: 600; flex: 1; text-align: right; padding-right: 8px; }
.f-value.placeholder { color: #b6bfca; font-weight: 400; }

.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 10px; border-radius: 10px; font-size: 1rem;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
}
.seg button.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }

.margin-preview { text-align: center; font-size: 1.2rem; font-weight: 800; min-height: 1.5rem; }
.margin-preview.good { color: var(--green); }
.margin-preview.bad { color: var(--red); }
.margin-preview.warn { color: var(--yellow); font-size: 0.95rem; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-size: 1rem; padding: 12px 18px; font-weight: 600;
}
.btn-big { width: 100%; padding: 16px; font-size: 1.1rem; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:active { background: var(--navy-2); }
.btn-ghost { background: var(--card); color: var(--navy); border: 1px solid var(--line); }
.btn-danger { background: #fbeaea; color: var(--red); }
.btn-col { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* ---------- 流水列表 ---------- */
.filter-row { display: flex; gap: 8px; margin-bottom: 6px; }
.chip {
  padding: 8px 16px; border-radius: 999px; font-size: 0.9rem;
  background: var(--card); color: var(--muted); border: 1px solid var(--line);
}
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 700; }
.legend { color: var(--muted); font-size: 0.72rem; margin: 4px 2px 10px; }

.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-item {
  background: var(--card); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.oi-top { display: flex; align-items: center; gap: 8px; }
.oi-route { font-weight: 700; font-size: 1.05rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-margin { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.oi-sub { color: var(--muted); font-size: 0.82rem; padding-left: 20px; }

.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot.red { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green { background: var(--green); }
.legend .dot { display: inline-block; vertical-align: -1px; }

.tag-over {
  background: #fbeaea; color: var(--red); font-size: 0.72rem;
  padding: 1px 6px; border-radius: 6px; margin-left: 6px; font-weight: 700;
}

.empty { text-align: center; color: var(--muted); padding: 40px 20px; font-size: 0.95rem; line-height: 1.8; }

/* ---------- 详情 ---------- */
.detail-card { background: var(--card); border-radius: var(--radius); padding: 18px; }
.d-route { font-size: 1.4rem; font-weight: 800; color: var(--navy); }
.d-meta { color: var(--muted); margin-top: 4px; font-size: 0.9rem; }
.d-parties { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 1.05rem; }
.d-k { color: var(--muted); font-size: 0.82rem; margin-right: 10px; display: inline-block; min-width: 44px; }
.d-money { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.d-money > div { display: flex; justify-content: space-between; align-items: baseline; }
.d-money b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.d-money b.good { color: var(--green); }
.d-money b.bad { color: var(--red); }
.d-note { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }
.d-state { margin-top: 14px; display: flex; gap: 8px; }
.d-state span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; }
.d-state .ok { background: #e8f6ee; color: var(--green); }
.d-state .no { background: #fbeaea; color: var(--red); }

/* ---------- 对账 ---------- */
.sec-title { font-weight: 800; margin: 18px 2px 10px; color: var(--navy); }
.sec-title.in::before { content: '↓ '; color: var(--red); }
.sec-title.out::before { content: '↑ '; color: var(--yellow); }
.group-list { display: flex; flex-direction: column; gap: 8px; }
.group-item {
  background: var(--card); border-radius: var(--radius); padding: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.gi-name { font-weight: 700; font-size: 1.05rem; }
.gi-right { text-align: right; }
.gi-amt { font-weight: 800; font-size: 1.15rem; color: var(--red); font-variant-numeric: tabular-nums; }
.sec-title.out ~ .group-list .gi-amt { color: var(--yellow); }
.gi-count { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }

.settle-summary { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; font-size: 1.05rem; }
.settle-summary b { color: var(--red); font-size: 1.3rem; }
.check-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 90px; }
.check-item {
  background: var(--card); border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.check-item input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--navy); flex-shrink: 0; }
.ci-body { flex: 1; }
.ci-top { font-weight: 700; }
.ci-sub { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.ci-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.settle-bar {
  position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
  padding: 10px 14px; display: flex; gap: 10px; align-items: center;
  max-width: 560px; margin: 0 auto;
}
.settle-bar .btn-ghost { flex-shrink: 0; }

/* ---------- 名录 ---------- */
.contact-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.contact-item {
  background: var(--card); border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 8px;
}
.ci-main { flex: 1; }
.ci-name { font-weight: 700; font-size: 1.05rem; }
.ci-call {
  width: 44px; height: 44px; border-radius: 50%; background: #e8f6ee; color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.ci-edit, .ci-del { padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; }
.ci-edit { background: var(--bg); color: var(--navy); }
.ci-del { background: #fbeaea; color: var(--red); }

/* ---------- 我的 ---------- */
.report-card { background: var(--card); border-radius: var(--radius); padding: 14px; }
.rp-row { display: flex; justify-content: space-between; padding: 8px 2px; font-size: 1rem; }
.rp-row span { color: var(--muted); }
.rp-row b.good { color: var(--green); }
.rp-top { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 10px; color: var(--muted); font-size: 0.85rem; line-height: 1.7; }

.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-item {
  display: block; width: 100%; text-align: left;
  background: var(--card); border-radius: var(--radius); padding: 16px;
  font-size: 1rem; font-weight: 600;
}
.backup-state { color: var(--muted); font-size: 0.82rem; margin: 8px 4px; }
.about-text { background: var(--card); border-radius: var(--radius); padding: 14px; color: var(--muted); font-size: 0.88rem; line-height: 2; }

/* ---------- 底部弹层 ---------- */
#sheet-mask {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 50;
}
#sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
  background: var(--card); border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow-y: auto;
  max-width: 560px; margin: 0 auto;
}
.hidden { display: none !important; }
.sheet-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 12px; }
.sheet-text { color: var(--text); line-height: 1.7; margin-bottom: 16px; white-space: pre-wrap; }
.sheet-btns { display: flex; gap: 10px; }
.sheet-btns .btn { flex: 1; padding: 14px; font-size: 1.05rem; }
.sheet-search, .sheet-input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; font-size: 1.05rem; font-family: inherit; outline: none;
  margin-bottom: 10px; background: var(--bg);
}
.sheet-search:focus, .sheet-input:focus { border-color: var(--navy); background: #fff; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.pick-item {
  text-align: left; background: var(--bg); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.pick-item:active { background: #e8edf3; }
.pick-name { font-weight: 700; font-size: 1.05rem; }
.pick-sub { color: var(--muted); font-size: 0.8rem; }
.pick-empty { text-align: center; color: var(--muted); padding: 24px; }
#sheet .seg { margin-bottom: 10px; }

/* ---------- 货物状态 ---------- */
.tag-status { font-size: 0.72rem; padding: 1px 6px; border-radius: 6px; margin-left: 4px; font-weight: 700; }
.tag-status.cs-loading { background: #fdf3e3; color: #8a6410; }
.tag-status.cs-transit { background: #e8f0fa; color: #2b5f9e; }
.tag-status.cs-unloaded { background: #eef0f2; color: var(--muted); }

.cargo-status { display: flex; gap: 8px; margin-top: 12px; }
.cs-btn {
  flex: 1; padding: 14px 4px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); font-size: 1rem;
}
.cs-btn.on.loading { background: #f7e6c4; border-color: #d9b05c; color: #6b4d08; font-weight: 800; }
.cs-btn.on.transit { background: #d3e2f5; border-color: #2b5f9e; color: #1f4a7d; font-weight: 800; }
.cs-btn.on.unloaded { background: #e8f6ee; border-color: var(--green); color: var(--green); font-weight: 800; }

/* ---------- 车型快捷 chips ---------- */
.truck-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.tchip {
  padding: 6px 10px; border-radius: 999px; font-size: 0.8rem;
  background: var(--bg); border: 1px solid var(--line); color: var(--muted);
}
.tchip:active { background: var(--navy); color: #fff; }

/* ---------- 智能识别粘贴区 ---------- */
.paste-box {
  background: var(--bg); border: 1px dashed #b9c4d0; border-radius: 12px;
  padding: 10px; margin-bottom: 10px;
}
.paste-box textarea {
  width: 100%; border: none; background: transparent; outline: none;
  font-family: inherit; font-size: 0.95rem; resize: none; margin-bottom: 8px;
}
.paste-box .btn { width: 100%; padding: 10px; font-size: 0.95rem; background: #fff; }

/* ---------- 安装卡片 ---------- */
.install-card {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(135deg, #16324f, #1f4265); color: #fff;
  border-radius: var(--radius); padding: 16px; margin-top: 14px;
  font-size: 1.05rem; font-weight: 700;
  box-shadow: 0 4px 14px rgba(22, 50, 79, 0.25);
}

/* ---------- 详情页电话 ---------- */
.d-driver { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-call {
  background: #e8f6ee; color: var(--green); font-weight: 700;
  padding: 8px 12px; border-radius: 10px; font-size: 0.9rem; white-space: nowrap;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%);
  background: rgba(28, 36, 48, 0.92); color: #fff;
  padding: 12px 22px; border-radius: 999px; font-size: 1rem; font-weight: 600;
  z-index: 60; max-width: 86vw; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}