/* ==========================================================================
   用车管理系统 · 样式
   --------------------------------------------------------------------------
   纯 CSS，无框架、无构建。三端自适应：
     ≥992px  桌面：表单横向排布，申请卡片两栏
     <992px  平板/手机：一律单栏，按钮加高方便点按
   浅色主题。
   ========================================================================== */

:root {
  --bg:        #f4f5f7;
  --card:      #ffffff;
  --border:    #e2e5ea;
  --border-2:  #cfd4db;
  --text:      #1f2329;
  --muted:     #6b7280;
  --muted-2:   #9aa1ab;
  --primary:   #2563eb;
  --primary-d: #1d4ed8;
  --primary-l: #eff4ff;
  --danger:    #dc2626;
  --danger-l:  #fef2f2;
  --ok:        #15803d;
  --ok-l:      #f0fdf4;
  --warn:      #b45309;
  --warn-l:    #fffbeb;
  --radius:    10px;
  --shadow:    0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

/* 作者样式里的 display 会盖掉 UA 的 [hidden]{display:none} —— 全局钉死，
   免得每加一个可隐藏的元素都要单独补一条规则。 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 顶栏 ─────────────────────────────────────────────────────────────── */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  flex-wrap: wrap;
}
.topbar .brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  white-space: nowrap;
}
.topbar .brand .dot { color: var(--primary); }
.topbar .spacer { margin-left: auto; }
.topbar .who { color: var(--muted); font-size: 13px; white-space: nowrap; }
.topbar .who b { color: var(--text); font-weight: 600; }

/* 左右两半、其中一半可能整个隐藏时用 margin-left:auto，不要用 space-between
   （否则只剩一个子项时会被顶到左边）。 */

/* ── 布局 ─────────────────────────────────────────────────────────────── */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card > h2 {
  margin: 0;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.card > h2 .spacer { margin-left: auto; }
.card .body { padding: 16px; }

/* ── 选项卡（员工端：申请用车 / 正在用车 / 申请记录）──────────────────── */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.tabs .spacer { margin-left: auto; }
.tabs .btn { margin-bottom: 4px; }
.tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  padding: 9px 14px;
  margin-bottom: -1px;          /* 压住 .tabs 的下边框，做出「选中态连着内容」的效果 */
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tab:hover { color: var(--text); background: #f7f8fa; }
.tab.on {
  color: var(--primary-d);
  font-weight: 600;
  background: #fff;
  border-color: var(--border);
  border-bottom-color: var(--primary);
}
.tab-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.tab-badge.gray { background: var(--muted-2); }
.tab-badge.return { background: #6d28d9; }

/* 小屏：三个选项卡均分整行，手指好点 */
@media (max-width: 600px) {
  .tabs { gap: 0; }
  .tab { flex: 1 1 0; justify-content: center; padding: 10px 6px; font-size: 13px; }
  .tabs .spacer { display: none; }
  .tabs .btn { flex: 1 1 100%; margin: 6px 0 4px; }
}

/* 提示条里的链接 / 按钮 / 小字（定位横幅和「已有进行中申请」提示会用到） */
.msg a { color: inherit; font-weight: 600; text-decoration: underline; }
.msg .mono { font-family: Consolas, "Courier New", monospace; }
.msg .lab { color: var(--muted); font-size: 12px; }
.msg .btn { margin-left: 8px; vertical-align: middle; }

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}
.span2 { grid-column: span 2; }

@media (max-width: 991px) {
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .span2 { grid-column: auto; }
}

/* ── 表单控件 ─────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .lab { font-size: 13px; color: var(--muted); }
.field > .lab .req { color: var(--danger); }

input[type="text"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f6f7f9;
  color: var(--muted);
  cursor: not-allowed;
}
select { appearance: none; background-image: none; padding-right: 10px; }

/* 表单控件在小屏上要足够高，避免 iOS 聚焦放大；同时必须写在基础规则**之后**
   （媒体查询里的元素选择器 0-0-1 压不过上面的 input[...] 规则）。 */
@media (max-width: 991px) {
  input[type="text"], input[type="password"], input[type="number"], select, textarea {
    font-size: 16px;
    padding: 11px 10px;
  }
}

/* ── 人员选择：触发按钮 + 已选标签 ─────────────────────────────────────── */
/* 开车人 / 车上人员都改成「点按钮 → 弹窗查询筛选」，不再用原生下拉和常驻勾选列表 */
.picker-trigger {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.picker-trigger:hover:not(:disabled) { border-color: var(--primary); }
.picker-trigger:disabled { background: #f6f7f9; color: var(--muted); cursor: not-allowed; }
.picker-trigger .pt-val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-trigger .pt-val.empty { color: var(--muted-2); }
.picker-trigger .pt-ico { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: var(--primary-l);
  border: 1px solid #bfdbfe;
  color: var(--primary-d);
  font-size: 13px;
  white-space: nowrap;
}
.chip .chip-x {
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 50%;
}
.chip .chip-x:hover { background: rgba(37, 99, 235, .16); }

/* ── 弹窗 ─────────────────────────────────────────────────────────────── */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  width: min(520px, 100%);
  max-height: min(82vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(16, 24, 40, .24);
  overflow: hidden;
}
/* 「使用详情」那种信息多的弹窗用宽版 */
.modal.modal-wide { width: min(760px, 100%); }
.modal.modal-wide .modal-bd { overflow-y: auto; }
.modal-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-hd .modal-title { font-size: 15px; font-weight: 600; }
.modal-hd .modal-x {
  margin-left: auto;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: 6px;
}
.modal-hd .modal-x:hover { background: #f3f4f6; color: var(--text); }
.modal-bd {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
/*
  批量添加人员的「没加进去的那几条」列表（2026-10-12 需求）。
  放在弹窗里，最多 200 条 —— 必须能滚，不能把弹窗撑破。
*/
.batch-fails {
  margin: 4px 0 0;
  padding-left: 18px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 13px;
  color: var(--danger);
}
.batch-fails li { margin: 2px 0; line-height: 1.5; }
.batch-fails li b { color: var(--text); }

.modal-bd .modal-search {
  width: 100%;
  /* ⚠ 光写 height 不够：.modal-bd 是 flex 列容器，默认 flex-shrink:1 会把它压矮
     （实测只写 height:40px 时量出来是 37px）。flex-basis 一起钉住才稳。 */
  flex: 0 0 40px;
  height: 40px;
  padding: 0 10px;
}

/*
  人员弹窗：搜索框 + 分区下拉**同一行**（2026-10-12 需求：加区域选择，默认知慧大厦，
  不然一屏几十个人）。
  ⚠ 同样要钉住 flex-basis（40px）—— `.modal-bd` 是 flex 列容器，不钉会被压矮。
  ⚠ `.pick-bar .modal-search` 必须**覆盖**上面那条的 `width:100%` / `flex:0 0 40px`，
    否则搜索框会把整行占满、把下拉挤到换行（弹窗变成两行）。
*/
.pick-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 40px;
}
.pick-bar .modal-search {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.pick-bar .pick-zone {
  flex: 0 0 auto;
  width: auto;
  min-width: 128px;
  height: 40px;
  padding: 0 8px;
}

/*
  人员选择：每个人名是一个**固定 90×40 的小块**，流水排列、自动换行。
  需求原文（2026-10-10）：人员很多时要能一屏看全，所以弹窗做成全屏、
  人名做成小块而不是整行。
  ⚠ 小块尺寸是**硬需求 90×40**，别改成 flex:1 或自适应 —— e2e 会量实际尺寸。
*/
.pick-grid {
  flex: 1;
  min-height: 120px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.pick-item {
  flex: 0 0 90px;
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.15;
  overflow: hidden;
  user-select: none;
  transition: background .12s, border-color .12s;
}
.pick-item:hover { background: #f7f8fa; border-color: #cbd5e1; }
.pick-item.on { background: var(--primary-l); border-color: var(--primary); }
/* 人名截断，绝不撑破 90×40 */
.pick-item .pi-name {
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ⚠ 原来这里还有 `.pick-item .pi-no`（副标题「用车 N 次」）——
   2026-10-12 用户要求不显示次数，元素和样式一并删掉。
   服务端仍按次数排序（常用的人排前面），只是不再显示这个数。 */
/* 选中标记：小块右上角一个小勾，不占额外的行 */
.pick-item { position: relative; }
.pick-item .pi-tick {
  position: absolute;
  top: -1px;
  right: 2px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* 小块模式下「没有匹配」要跨整行 */
.pick-grid .none { flex: 0 0 100%; padding: 26px 16px; text-align: center; color: var(--muted-2); font-size: 13px; }

/* ── 人员选择弹窗：全屏（人可能很多，要一屏看全）────────────────────────── */
/* ⚠ 用 vw/vh 而不是 100%：`.modal-mask` 是 `position:fixed; inset:0`，
   它的包含块是**视口减去滚动条**（本页有滚动条时会少 ~15px），
   用 100% 就贴不满右边。vw/vh 才是真正的视口尺寸。 */
.modal.modal-full {
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
}
.modal-mask.modal-mask-full { padding: 0; }
.modal-ft {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #fbfcfd;
}
.modal-ft .spacer { margin-left: auto; }

/* 小屏上弹窗尽量铺满，手指好点 */
@media (max-width: 600px) {
  .modal-mask { padding: 0; align-items: flex-end; }
  .modal { max-height: 92vh; width: 100%; border-radius: 14px 14px 0 0; }
  /* ⚠ 人员小块模式**不要**跟着放大 padding/font —— 90×40 是硬需求，
     改了会溢出。全屏弹窗在小屏上本来就是全屏，也无需再调。 */
  .modal.modal-full { max-height: none; border-radius: 0; }
}

/* ── 时间范围条（申请记录）────────────────────────────────────────────── */
/* 条件默认折叠（需求），这一行常驻：左边「筛选」开关，右边结果条数。 */
.range-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.range-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.range-bar .sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
/* 条件行的第二行（如日志记录的「操作员 / 类型 / 关键词」）——
   紧跟上一行、不重复留白，也不画那条虚线下边距。 */
.range-bar.sub {
  padding-top: 0;
  margin-top: -4px;
}
.range-bar input[type="date"] {
  width: auto;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 6px;
}
/* 条件行里的搜索框 / 下拉：别用 input 的默认 100% 宽度，撑爆整行 */
.range-bar input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 6px;
}
.range-bar select {
  width: auto;
  min-width: 130px;
  padding: 5px 8px;
  font-size: 13px;
  border-radius: 6px;
}
.chip-btn {
  appearance: none;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.chip-btn:hover { color: var(--text); border-color: var(--primary); }
.chip-btn.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
/* 翻页条（日志记录用 —— 表只增不删，没有翻页就没法看） */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--border);
}
.pager .lab { color: var(--muted); font-size: 13px; }
.pager .btn[disabled] { opacity: .45; cursor: default; }
@media (max-width: 991px) {
  .range-bar input[type="date"] { font-size: 16px; padding: 8px 8px; }
  .chip-btn { padding: 8px 14px; }
}

/* ── 按钮 ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-2);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: #f7f8fa; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-d); border-color: var(--primary-d); }
.btn-danger { color: var(--danger); border-color: #f0c2c2; background: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-l); }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn-ok:hover:not(:disabled) { background: #166534; border-color: #166534; }
/* 「到达」「还车」两个主要操作按钮**尺寸完全一致**（2026-10-10 需求）——
   原来只有「还车」有 min-width:104px，「到达」是两个字的自然宽度，
   并排看一胖一瘦。现在两个都钉死同一个尺寸（等宽等高），不再各自为政。 */
.arr-btn,
.ret-btn {
  flex: 0 0 auto;
  min-width: 104px;
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
}
.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-block { width: 100%; }

@media (max-width: 991px) {
  .btn { padding: 11px 16px; }
  .btn-sm { padding: 7px 12px; }
}

/* ── 徽章 ─────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.pending  { background: var(--warn-l);   color: var(--warn);   border-color: #fde68a; }
.badge.inuse    { background: var(--primary-l);color: var(--primary-d); border-color: #bfdbfe; }
.badge.return   { background: #f5f3ff;         color: #6d28d9;       border-color: #ddd6fe; }
.badge.done     { background: var(--ok-l);     color: var(--ok);     border-color: #bbf7d0; }
.badge.rejected { background: var(--danger-l); color: var(--danger); border-color: #fecaca; }
.badge.expired  { background: #f3f4f6;         color: var(--muted);  border-color: var(--border-2); }
.badge.gray     { background: #f3f4f6;         color: var(--muted);  border-color: var(--border); }

/* 「本段开车人」现在是**固定值**（登录人，不可改），不再是可点的选择器 ——
   所以长得像输入框会误导人「这里能点」，用纯文本样式。 */
.fixed-val {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  border: 1px dashed var(--border-2);
  border-radius: 8px;
  background: #f9fafb;
  color: var(--muted);
  font-size: 13px;
}

/* ── 提示条 ───────────────────────────────────────────────────────────── */
.msg {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  background: #f9fafb;
}
.msg.err { background: var(--danger-l); border-color: #fecaca; color: #991b1b; }
.msg.ok  { background: var(--ok-l);     border-color: #bbf7d0; color: #166534; }
.msg.warn{ background: var(--warn-l);   border-color: #fde68a; color: #92400e; }

/* ⚠ 作者样式里的 display 会盖掉 UA 的 [hidden]{display:none}，必须显式写回来 */
.msg[hidden], .empty[hidden], .card[hidden], .sec[hidden] { display: none !important; }

/* ── 申请卡片 ─────────────────────────────────────────────────────────── */
.apply {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  margin-bottom: 12px;
  overflow: hidden;
}
.apply:last-child { margin-bottom: 0; }
.apply .head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fbfcfd;
}
/* 卡片头部主标题：员工端是车辆名，后台仍是申请单号（管理员要按单号对单） */
.apply .head .no,
.apply .head .car { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
/* 头部那颗里程胶囊：使用中=当前里程，还完车=还车里程 */
.apply .head .mile-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 10px;
  border-radius: 999px;
  background: var(--primary-l);
  border: 1px solid #bfdbfe;
  color: var(--primary-d);
  font-size: 12px;
  white-space: nowrap;
}
.apply .head .mile-chip b { font-size: 14px; font-weight: 700; }
.apply .head .spacer { margin-left: auto; }
.meta {
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
@media (max-width: 991px) { .meta { grid-template-columns: minmax(0, 1fr); } }
.meta .row { display: flex; gap: 8px; font-size: 13px; min-width: 0; }
.meta .row .k { color: var(--muted); flex: 0 0 84px; }
.meta .row .v { color: var(--text); word-break: break-all; }
.meta .row .v.mono { font-family: Consolas, "Courier New", monospace; }

/* 坐标小字：地址下面附一行经纬度（定位记录要能溯源到原始坐标） */
.coord {
  margin-top: 2px;
  color: var(--muted-2);
  font-size: 12px;
  font-family: Consolas, "Courier New", monospace;
  word-break: break-all;
}
/* 详情弹窗里的坐标是塞在 .meta .row .v 里的**行内**元素（不是块级小字行），
   把 margin-top 去掉，免得把行高顶开。 */
.meta .row .v .coord { margin-top: 0; }

.sec {
  padding: 12px 14px;
  border-top: 1px dashed var(--border);
}
.sec > h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
}
/* ★ 只装「目的地」折叠条的 .sec（申请记录页）：里面就一行标题 + 一颗小开关，
   按通用 .sec 的 12px 上下留白会被撑成一条 ~60px 的高条（用户截图反馈过）。
   这块的 padding 收窄到 8px，配合下面 .trips-bar 的零 margin 一起把行高压下来。 */
.sec.sec-trips { padding-top: 8px; padding-bottom: 8px; }
/* ⊘ `.mileage` / `.veh` / `.veh-name` 已随「车辆信息」块一起删掉（2026-10-10 需求：
   该块与卡片头部重复）。不要因为看到新设计里有「里程大字」就顺手复用这几个类名 ——
   要新样式就新起名字，别复活死规则。 */

/* ── 目的地列表 ───────────────────────────────────────────────────────── */
/* ★ 目的地块自己也能折叠，但**只在「申请记录」页**（`opts.collapseTrips`）。
   「正在用车」页的目的地始终铺开 —— 见 app.js 里 `applyCardHtml` 的注释。
   ⚠ 这一层折叠和头部那颗「详情 ▾」是**两套独立开关**，样式也各管各的。 */
.trips-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* ★ 原来是 margin-bottom: 10px —— 折叠时列表是 display:none，这 10px 变成
     一行标题下面白留的空档，白白把这一条顶高。间距改由展开的列表自己带（见下）。 */
  margin-bottom: 0;
}
/* 标题在 .trips-bar 里由 flex 管间距，别再吃 `.sec > h3` 的 margin-bottom */
.trips-bar > h3 { margin: 0; }
.trips-bar .spacer { margin-left: auto; }
/* 「目的地 ▾」开关比通用 .btn-sm 再小一号 —— 它是这一行里唯一会顶高度的东西
   （.btn 的 9px/16px 内边距 + 14px 字号用在标题行上太重）。 */
.trips-bar .trips-toggle { padding: 3px 10px; font-size: 12px; line-height: 1.6; }
/* 标题与目的地列表之间的间距。折叠时整个容器是 display:none，间距自然不存在。 */
.trips-fold { margin-top: 10px; }
/* ⚠ `.trips-fold` 收起来时用 `hidden` 属性 —— 作者样式里的 display 会盖掉
   UA 的 `[hidden]{display:none}`，这条必须留着（同 `.sec[hidden]` 那条）。 */
.trips-fold[hidden] { display: none !important; }
/* ⚠ 窄屏（触控）把「目的地 ▾」放大回可点尺寸 —— 桌面端为了压行高把它收到 27px，
   但 27px 的触控目标太小（iOS 建议 ≥44px，起码别比通用 `.btn-sm` 的 37px 更小）。
   注意：上面 `.trips-bar .trips-toggle`（0,2,0）特异性**高于**媒体查询里的 `.btn-sm`（0,1,0），
   不写这一条的话窄屏也会跟着变成 27px。 */
@media (max-width: 991px) {
  .trips-bar .trips-toggle { padding: 8px 12px; font-size: 13px; }
}

.trips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfd;
  font-size: 13px;
}
.trips .seq {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trips .info { min-width: 0; }
.trips .info .loc { word-break: break-all; }
.trips .info .sub { color: var(--muted); font-size: 12px; }

/* 卡片里的「标签 + 控件 + 按钮」一行（记录到达 / 还车）。
   ⚠ `.field` 给的是 `flex: 1 1 200px` —— 一旦卡片容器比 200px 宽，控件就撑满整行，
     「本段开车人」那种选择器会变成一条又长又空的条（需求：固定 240px）。
     所以这里改成**定宽 + 不伸缩**：控件 240px，按钮跟在后面。 */
.inline-form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.inline-form .field { flex: 0 0 240px; width: 240px; min-width: 0; }
.inline-form .field > .lab { white-space: nowrap; }
/* 还车里程那个是输入框，同样定宽 —— 太宽的文本框输入体验反而差 */
.inline-form .field > input[type="text"],
.inline-form .field > .picker-trigger { width: 100%; }
.inline-form .act { flex: 0 0 auto; }
/* 窄屏（手机）一行放不下 240px + 按钮时就让它铺满，别留个半截 */
@media (max-width: 600px) {
  .inline-form .field { flex: 1 1 100%; width: auto; }
}
.act-row { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.act-row.right { justify-content: flex-end; }

/* 「到达」定位失败时的出口行（2026-10-11）——
   ⚠ 别退回 window.confirm：手机上是**阻塞式系统弹窗**、按钮还是英文 OK/取消，
     而且 CDP 自动化里必须额外挂 dialog 事件才能点掉（漏了整轮挂死）。 */
.arr-esc { margin-top: 10px; }
.arr-esc .esc-msg {
  font-size: 12px;
  line-height: 1.7;
  color: var(--warn);
  word-break: break-all;
}
.arr-esc .act-row { margin-top: 8px; }

/* 卡片 .sec 里的说明小字（还车提示、到达提示）——
   这些 .lab 不在 .field 里，`.field > .lab` 那条规则盖不到，得单独给。 */
.sec > .lab {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-2);
}

/* ── 表格（后台）──────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
table.tbl th { background: #fbfcfd; color: var(--muted); font-weight: 600; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl td.wrap-cell { white-space: normal; word-break: break-all; }
/* 停用的人/物：整行压暗，但徽章保留自己的颜色（它是状态本身，不该被压掉） */
table.tbl tr.row-off > td { color: var(--muted-2); }

/* 备注列加宽（2026-10-11）：之前表格宽度都被「操作」撑开了，备注只能塞一两字一换行，
   看着像「备注: 无」下面的「5 座 / 轿 / 车 / ，」那样非常丑 —— 整个 .table-wrap 本身会横滚。 */
#carTable td:nth-child(6), #carTable th:nth-child(6),
#userTable td:nth-child(5), #userTable th:nth-child(5) {
  min-width: 200px;
  white-space: normal;        /* 备注里允许换行（继承自 th 的 nowrap 在备注这列要破） */
}
#carTable td:nth-child(6) { word-break: break-all; }   /* 极长没空格的字符串也别撑爆表格 */

/* ── 空态 ─────────────────────────────────────────────────────────────── */
.empty {
  padding: 26px 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}

/* ── 表单下方的说明小字 ───────────────────────────────────────────────── */
.hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted-2);
}
.hint .mono {
  font-family: Consolas, "Courier New", monospace;
  color: var(--muted);
  background: #f3f4f6;
  border-radius: 4px;
  padding: 1px 4px;
}

/* ── 登录页 ───────────────────────────────────────────────────────────── */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, #eef2f8 0%, #f4f5f7 100%);
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, .09);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-card h1 { margin: 0; font-size: 21px; letter-spacing: 1px; text-align: center; }
.login-card .sub { margin: -8px 0 4px; text-align: center; color: var(--muted); font-size: 13px; }
.login-card .check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.login-card .check input { margin: 0; }
.login-card .tip { font-size: 12px; color: var(--muted-2); text-align: center; line-height: 1.7; }

/* ── 扫码 / NFC 到达登记页（手机端）────────────────────────────────────── */
/* 这一页是**手机竖屏为主**的独立入口（Scan.aspx），不复用 .login-card：
   它的内容是「标题 + 若干条提示 + 一个主按钮」，比登录表单松很多。
   ⚠ 定位相关的两个类（`.msg.warn` 横幅、`.empty` 空态）沿用全局样式，
     这里只补布局。 */
.scan-body {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;          /* 内容不长时贴顶，比居中更好看（居中会让人以为页面没加载完） */
  justify-content: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #eef2f8 0%, #f4f5f7 100%);
}
.scan-card {
  width: 100%;
  max-width: 440px;
  margin-top: 6vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, .09);
  padding: 24px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-card > h1 { margin: 0; font-size: 20px; letter-spacing: 1px; text-align: center; }
.scan-card .sub { margin: -6px 0 2px; text-align: center; color: var(--muted); font-size: 13px; }
/* 状态区：换内容时高度会跳，给个下限免得按钮上下窜 */
#scanStage { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
/* 卡片里的 .meta 默认是两栏栅格（给宽卡片用的），手机上挤成一团 → 强制单栏 */
.scan-card .meta { padding: 0; grid-template-columns: minmax(0, 1fr); }
/* 主按钮在手机上要够大够好点 */
.scan-card .btn-block { padding: 13px 16px; font-size: 15px; }
.scan-card .empty { padding: 18px 8px; }
.scan-foot {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted-2);
}
.scan-foot .spacer { margin-left: auto; }
.scan-foot .lab { color: var(--muted-2); }

/* ── 顶部细进度条（请求中）────────────────────────────────────────────── */
#busy {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--primary); z-index: 999; transition: width .2s;
}
#busy.on { width: 70%; }
#busy.done { width: 100%; opacity: 0; transition: width .2s, opacity .3s .1s; }

/* ── 悬浮提示 ─────────────────────────────────────────────────────────── */
#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: min(92vw, 460px);
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 6px 22px rgba(16, 24, 40, .18);
  background: #1f2329;
  color: #fff;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#toast.err { background: #991b1b; }
#toast.ok  { background: #166534; }

@media print {
  .topbar, .btn, #toast, #busy { display: none !important; }
  body { background: #fff; }
}