/* ============================================================
   费用管理系统 · 网页版样式
   配色与桌面端保持一致（降低学习成本），并附深色主题切换。
   ============================================================ */
:root {
  --bg: #eef1f5;
  --panel: #ffffff;
  --panel-2: #f7f9fc;
  --primary: #2f6fb3;
  --accent: #2f80ed;
  --accent-hover: #1c6fe0;
  --accent-press: #185fc4;
  --header: #1f3a5f;
  --text: #222222;
  --muted: #555555;
  --muted-2: #888888;
  --border: #cfd8e3;
  --border-soft: #e3e9f1;
  --row-hover: #eaf2fb;
  --row-sel: #2f80ed;
  --badge-ok: #2e7d32;
  --badge-wait: #c2783c;
  --badge-none: #9aa4b2;
  --danger: #c0392b;
  --shadow: 0 2px 10px rgba(31, 58, 95, 0.08);
}

[data-theme="dark"] {
  --bg: #131821;
  --panel: #1b212c;
  --panel-2: #212836;
  --primary: #5b9bd5;
  --accent: #4f93ec;
  --accent-hover: #6aa6f3;
  --accent-press: #3f82dc;
  --header: #0e1420;
  --text: #e6ebf2;
  --muted: #9aa6b8;
  --muted-2: #6b7689;
  --border: #2c3543;
  --border-soft: #283040;
  --row-hover: #232c3a;
  --row-sel: #2f6fbf;
  --badge-ok: #3da343;
  --badge-wait: #d08a4a;
  --badge-none: #6b7689;
  --danger: #e06b5b;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC",
    "Hiragino Sans GB", "SimHei", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- 登录页 ---------- */
.login-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1f3a5f 0%, #2f6fb3 100%);
}
.login-card {
  width: 360px;
  background: var(--panel);
  border-radius: 14px;
  padding: 28px 26px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.login-card h1 {
  margin: 0 0 2px;
  font-size: 20px;
  color: var(--header);
}
.login-card .sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--muted-2);
}
.login-card label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--muted);
}
.login-card input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-actions { display: flex; gap: 8px; margin-top: 18px; }
.login-actions button { flex: 1; }
.login-server {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted-2);
  word-break: break-all;
}
.login-err { color: var(--danger); font-size: 12px; min-height: 16px; margin-top: 8px; }

/* ---------- 通用按钮 ---------- */
.btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 7px;
  font-size: 13px; /* 三端统一：桌面端 10pt ≈ 13.3px，小程序 26rpx ≈ 13px */
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--row-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-accent:active { background: var(--accent-press); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: rgba(192, 57, 43, 0.08); }

/* ---------- 主框架 ---------- */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.title-band {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--header);
  color: #fff;
  padding: 9px 14px;
}
.title-band .t1 { font-size: 16px; font-weight: 700; }
.title-band .t2 { font-size: 11px; color: #cdd9e8; }
.title-band .spacer { flex: 1; }
.title-band .who { font-size: 12px; color: #cdd9e8; }
.title-band .theme-btn {
  background: transparent; border: 1px solid #3a557c; color: #cdd9e8;
  border-radius: 6px; padding: 3px 9px; font-size: 11px;
}
.title-band .theme-btn:hover { background: #284064; }

.filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  flex-wrap: wrap;
}
.filter-bar .lbl { color: var(--muted); font-size: 12px; }
.filter-bar select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.toolbar .spacer { flex: 1; }

.sep { height: 1px; background: var(--border-soft); margin: 0 10px; }

/* ---------- 主区域 ---------- */
.main {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 6px 10px;
  gap: 10px;
}
.left {
  width: 340px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 日期筛选框 */
.date-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--panel);
}
.date-box .filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 0.5px solid var(--border); }
.date-box .filter-row .lbl { color: var(--muted); font-size: 12px; white-space: nowrap; }
.date-box .filter-row select { padding: 3px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.date-box .filter-row .btn { padding: 3px 8px; font-size: 13px; border-radius: 6px; }
.date-box .legend { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.date-box .row { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.date-box .row > span:first-child { width: 22px; color: var(--muted); }
.date-box select { padding: 3px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); }
.date-box .filter-sum { margin-top: 6px; font-size: 11.5px; color: var(--muted); }

.section-title { display:flex; align-items:center; justify-content:space-between; font-size: 12.5px; font-weight: 700; color: var(--primary); margin: 2px 0; }
.section-title .btn-sm { font-size:11px; padding:1px 8px; border:1px solid var(--border); border-radius:999px; background:var(--panel); color:var(--muted); cursor:pointer; }
.section-title .btn-sm:hover { color:var(--accent); border-color:var(--accent); }

.trip-list {
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  overflow-y: auto;
}
.trip-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  font-size: 12.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trip-item:hover { background: var(--row-hover); }
.trip-item.sel { background: var(--row-sel); color: #fff; }
.trip-item.sel .rt-label { color: #eaf2ff; }
.trip-item.done { color: #2e7d32; }
.trip-item.done.sel { color: #fff; }
.ti-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.trip-item .name { font-weight: 600; font-size: 13px; }
.trip-item .date-range { font-size: 11px; color: var(--muted-2); }
.trip-item.sel .date-range { color: #b8d4ff; }

/* ---------- 出差卡片报销开关（横向 Toggle，与文字同一行） ---------- */
.ti-toggles {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.reimb-toggle {
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.rt-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.trip-item.sel .rt-label { color: #d0e4ff; }
.rt-track {
  width: 38px; height: 20px; border-radius: 10px;
  background: #d0d5dd; position: relative;
  transition: background .2s; flex-shrink: 0;
  border: 1px solid #c0c5cd;
}
.reimb-toggle.on .rt-track { background: #34a853; border-color: #2d9249; }
.rt-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; position: absolute;
  top: 1px; left: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s;
}
.reimb-toggle.on .rt-thumb { transform: translateX(18px); }
.rt-sep {
  width: 1px; height: 20px; background: var(--border-soft);
  flex-shrink: 0;
}

/* ---------- 右侧信息 + 看板 ---------- */
.info { padding: 2px 2px 6px; }
.trip-title { font-size: 14px; font-weight: 700; color: #1f2d3d; }
[data-theme="dark"] .trip-title { color: var(--text); }
.dashboard { display: flex; align-items: flex-end; gap: 22px; margin-top: 4px; }
.metric .cap { font-size: 11px; color: var(--muted-2); }
.metric .val { font-size: 15px; font-weight: 700; color: #1f2d3d; }
[data-theme="dark"] .metric .val { color: var(--text); }
.status-badge {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.status-badge.ok { background: var(--badge-ok); }
.status-badge.wait { background: var(--badge-wait); }
.status-badge.none { background: var(--badge-none); }

/* ---------- 表格区（上下分栏） ---------- */
.vpanes { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pane {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pane.exp { flex: 3; }
.pane.inc { flex: 1; }
.pane .pane-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-bottom: 1px solid var(--border-soft);
}
.pane .pane-head .section-title { margin: 0; }
.pane .pane-head .spacer { flex: 1; }
.pane .scroll { overflow: auto; flex: 1; min-height: 0; }
/* 桌面端表格横向滚动条 - 默认 webkit 极细看不出，加粗+配色一眼能识别 */
.pane .scroll { scrollbar-width: auto; }
.pane .scroll::-webkit-scrollbar { height: 14px; width: 14px; background: transparent; }
.pane .scroll::-webkit-scrollbar-thumb {
  background: #9fb4cf; border-radius: 7px;
  border: 2px solid #e7ecf3;
}
.pane .scroll::-webkit-scrollbar-thumb:hover { background: #2f80ed; border-color: #d8e4f4; }
.pane .scroll::-webkit-scrollbar-track { background: #e7ecf3; }
.pane .scroll { scrollbar-color: #9fb4cf #e7ecf3; } /* Firefox */

table.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.grid th, table.grid td {
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}
table.grid thead th {
  position: sticky; top: 0;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  z-index: 1;
}
table.grid tbody tr:hover { background: var(--row-hover); }
table.grid tbody tr.sel { background: var(--row-sel); color: #fff; }
table.grid tbody tr.sel a { color: #eaf2ff; }
table.grid td a { color: var(--accent); text-decoration: none; }
table.grid td a:hover { text-decoration: underline; }
table.grid td .na { color: var(--muted-2); }

/* ---------- 底部合计 ---------- */
.bottom-bar {
  background: var(--header);
  color: #fff;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- 模态弹窗 ---------- */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 25, 40, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
.modal {
  background: var(--panel);
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 320px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.modal h3 { margin: 0 0 12px; font-size: 15px; color: var(--header); }
.modal .field { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; margin: 7px 0; }
.modal .field label { color: var(--muted); font-size: 12px; }
.modal .field input, .modal .field select {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); color: var(--text); font-size: 13px; outline: none; width: 100%;
}
.modal .field input:focus, .modal .field select:focus { border-color: var(--accent); }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.modal .amt-row { display: flex; gap: 6px; align-items: center; }
.modal .amt-row input { flex: 1; min-width: 0; }
.modal .ocr-status { font-size: 11px; color: var(--muted); margin-top: 3px; min-height: 14px; }
.modal .ocr-status:empty { display: none; }

/* AI 智能问答 */
.btn-ask {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  border-color: transparent; color: #fff;
}
.btn-ask:hover { background: linear-gradient(135deg, #6d28d9, #4338ca); border-color: transparent; }
.btn-ask:active { background: linear-gradient(135deg, #5b21b6, #3730a3); }
.ask-chat {
  max-height: 46vh; min-height: 160px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 4px 2px; margin-bottom: 10px;
}
.ask-bubble {
  max-width: 86%; padding: 8px 11px; border-radius: 12px;
  font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.ask-ai {
  align-self: flex-start; background: var(--panel-2);
  border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px;
}
.ask-user {
  align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px;
}
.ask-typing { color: var(--muted); font-style: italic; }
/* AI 回答里的下载链接（WPS / PDF） */
a.ask-download {
  display: inline-block; margin-top: 8px; padding: 7px 12px; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
a.ask-download:hover { opacity: 0.9; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ask-suggest .chip {
  font-size: 12px; padding: 5px 10px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--accent); cursor: pointer; user-select: none;
}
.ask-suggest .chip:hover { border-color: var(--accent); }
.ask-input-row { display: flex; gap: 8px; }
.ask-input-row input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--panel-2); color: var(--text);
  font-size: 13px; outline: none;
}
.ask-input-row input:focus { border-color: var(--accent); }

/* AI 问答弹窗标题栏 + 关闭按钮 */
.ask-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.ask-header h3 { margin: 0; font-size: 15px; }
.ask-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--muted); padding: 0 4px; line-height: 1;
}
.ask-close:hover { color: var(--text); }

/* 项目多选弹层 */
.popup {
  position: fixed; z-index: 60;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px; box-shadow: var(--shadow);
  min-width: 220px;
}
.popup h4 { margin: 0 0 8px; font-size: 13px; color: var(--header); }
.popup label.opt { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.popup .row { display: flex; gap: 8px; margin-top: 10px; }
.popup .row .spacer { flex: 1; }

/* 用户管理窗口 */
.usermgr { width: 560px; max-width: 94vw; }
.usermgr .body { display: flex; gap: 12px; }
.usermgr .col { flex: 1; min-width: 0; }
.usermgr .col h4 { margin: 0 0 6px; font-size: 13px; color: var(--header); }
.usermgr table.grid { font-size: 12px; }

.hidden { display: none !important; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--header); color: #fff; padding: 9px 16px; border-radius: 8px;
  font-size: 13px; z-index: 80; box-shadow: var(--shadow); opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* ============================================================
   响应式适配（移动优先的分层断点）
   ============================================================ */
@media (max-width: 980px) {
  .main { flex-direction: column; }
  .left { width: 100%; min-width: 0; max-height: 240px; }
}

/* ---------- 平板 / 横屏手机（≤768px） ---------- */
@media (max-width: 768px) {
  /* 顶部标题栏：换行、隐藏副标题、按钮紧凑 */
  .title-band {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .title-band .t2 { display: none; }
  .title-band .t1 { font-size: 15px; flex: 1 1 auto; }
  .title-band .spacer { display: none; }
  .title-band .who { order: 3; width: 100%; font-size: 11px; }
  .title-band .theme-btn { padding: 5px 10px; min-height: 30px; }

  /* 筛选栏：标签独占一行、控件占满行宽 */
  .date-box .filter-row { gap: 4px 8px; padding: 8px 0; flex-direction: column; align-items: stretch; border-bottom-color: transparent; }
  .date-box .filter-row .lbl { flex: 1 1 100%; font-size: 12px; }
  .date-box .filter-row .btn, .date-box .filter-row select { flex: 1 1 auto; min-width: 120px; }

  /* 工具栏：横向滑动，按钮不挤压换行 */
  .toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 12px;
  }
  .toolbar .btn { flex: 0 0 auto; white-space: nowrap; }
  .toolbar .spacer { display: none; }

  .main { padding: 6px 8px; gap: 8px; }
  .left { width: 100%; min-width: 0; max-height: 38vh; }

  /* 看板换行 */
  .dashboard { flex-wrap: wrap; gap: 10px 18px; }
  .metric .val { font-size: 14px; }

  /* 表格操作按钮条也横向滑动 */
  .pane .pane-head {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pane .pane-head .btn { flex: 0 0 auto; white-space: nowrap; }

  .bottom-bar {
    font-size: 11.5px; padding: 8px 12px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

/* ---------- 手机（≤560px）：表格转为卡片 ---------- */
@media (max-width: 560px) {
  .login-card { width: auto; max-width: 92vw; padding: 22px 18px 18px; }

  /* 费用/收入表格卡片化：隐藏表头，每行变卡片，列名由 data-label 显示 */
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 10px;
    padding: 4px 4px;
    background: var(--panel);
    box-shadow: var(--shadow);
  }
  table.grid tbody tr.sel { background: var(--row-sel); }
  table.grid tbody tr.sel td { color: #fff; }
  table.grid tbody tr.sel td a { color: #eaf2ff; }
  table.grid tbody tr.sel td::before { color: #eaf2ff; }
  table.grid td {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 8px 8px;
    text-align: right;
    white-space: normal;
  }
  table.grid td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted);
    text-align: left;
    flex: 0 0 auto;
  }
  table.grid td a { text-align: right; word-break: break-all; }

  /* 弹窗单列、窄屏保护 */
  .modal { min-width: 0; width: auto; max-width: 94vw; }
  .modal .field { grid-template-columns: 1fr; gap: 4px; }
  .modal .field label { font-size: 12px; }
  .modal .actions { flex-wrap: wrap; }
  .modal .actions .btn { flex: 1 1 auto; }

  .date-box .row { flex-wrap: wrap; }
  .date-box select { flex: 1 1 auto; }
}

/* ---------- 触摸设备：放大可点区域，输入框 16px 防 iOS 聚焦缩放 ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn { padding: 9px 14px; }
  .title-band .theme-btn { padding: 7px 12px; }
  .toolbar .btn, .pane .pane-head .btn, .filter-bar .btn { padding: 9px 12px; }
  .trip-item { padding: 11px 12px; }
  .modal .field input, .modal .field select { padding: 10px 11px; font-size: 16px; }
}

/* ============================================================
   移动端专属界面（仅 ≤768px 生效；桌面端结构/逻辑完全不变）
   设计：原生 App 般体验 —— 底部导航 + 悬浮添加 + 操作面板 + 列表↔详情
   ============================================================ */
.mobile-only { display: none; }
/* 出差卡片合计：桌面端不显示，移动端显示 */
.trip-sum { display: none; }

@media (max-width: 768px) {
  /* 移动端容器：仅窄屏显示（桌面端由 .mobile-only 隐藏） */
  #mobChrome { display: block; }
  /* 隐藏桌面端工具栏 / 筛选栏 / 表格操作按钮（功能移入底部导航与面板） */
  .toolbar, .filter-bar { display: none !important; }
  .pane .pane-head .btn { display: none !important; }
  .pane .pane-head { padding: 8px 12px; border-bottom: 1px solid var(--border-soft); }
  .bottom-bar { display: none; }            /* 合计已体现在看板，避免与导航重叠 */
  .date-box { display: none; }              /* 日期筛选移入“我的→清除” */

  /* 标题栏精简：仅标题 + 返回（主题/退出移入“我的”） */
  .title-band {
    flex-wrap: nowrap; align-items: center; gap: 8px;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .title-band .t2, .title-band .spacer, .title-band .who,
  .title-band .theme-btn { display: none !important; }
  .title-band .t1 { font-size: 16px; font-weight: 700; flex: 1; }

  .mob-back {
    order: -1; background: transparent; border: none;
    color: #cdd9e8; font-size: 15px; padding: 6px 6px 6px 0; white-space: nowrap;
  }
  #app.mob-detail .mob-back { display: inline-block; }

  /* 主区域：列表屏 / 详情屏 二选一 —— 内容自然流动，不被强制撑满 */
  .main { display: block; padding: 0; }
  .left, .right {
    display: none;
    width: 100%; min-width: 0;
    padding: 10px 12px calc(72px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    min-height: calc(100dvh - 120px); /* 标题栏 + 导航预留 */
  }
  .left { display: flex; }                    /* 默认列表屏 */
  #app.mob-detail .left { display: none; }
  #app.mob-detail .right { display: flex; }

  /* 出差列表卡片化（强化） */
  .section-title { font-size: 13px; margin: 4px 2px 8px; }
  .trip-list { border: none; background: transparent; }
  .trip-item {
    flex-direction: row; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
    box-shadow: var(--shadow);
  }
  .trip-item.sel { background: var(--row-sel); }
  .trip-item.sel .name, .trip-item.sel .mark, .trip-item.sel .trip-sum { color: #fff; }
  .trip-item.sel .trip-sum span { color: #eaf2ff; }
  .trip-item .ti-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .trip-item .name { font-size: 14px; font-weight: 600; }
  .trip-item .mark { font-size: 11.5px; color: var(--muted); }
  .trip-sum {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  }
  .trip-sum span:last-child { color: var(--accent); }

  /* 看板指标卡片 */
  .info { padding: 0 0 8px; }
  .trip-title { font-size: 15px; }
  .dashboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric {
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px;
  }
  .metric .cap { font-size: 11px; color: var(--muted-2); }
  .metric .val { font-size: 16px; }
  .status-badge { grid-column: 1 / -1; margin-left: 0; text-align: center; }

  /* 表格 → 卡片（沿用 data-label 列名） */
  table.grid, table.grid tbody, table.grid tr, table.grid td { display: block; width: 100%; }
  table.grid thead { display: none; }
  table.grid tr {
    border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px;
    padding: 2px 4px; background: var(--panel); box-shadow: var(--shadow);
  }
  table.grid tbody tr.sel { background: var(--row-sel); }
  table.grid tbody tr.sel td { color: #fff; }
  table.grid tbody tr.sel td a { color: #eaf2ff; }
  table.grid tbody tr.sel td::before { color: #eaf2ff; }
  table.grid td {
    border: none; display: flex; justify-content: space-between; align-items: center;
    gap: 14px; padding: 8px 8px; text-align: right; white-space: normal;
  }
  table.grid td::before {
    content: attr(data-label); font-weight: 700; color: var(--muted);
    text-align: left; flex: 0 0 auto;
  }
  table.grid td a { text-align: right; word-break: break-all; }

  /* 弹窗单列窄屏保护 */
  .modal { min-width: 0; width: auto; max-width: 94vw; }
  .modal .field { grid-template-columns: 1fr; gap: 4px; }
  .modal .field label { font-size: 12px; }
  .modal .actions { flex-wrap: wrap; }
  .modal .actions .btn { flex: 1 1 auto; }

  /* 项目筛选弹层居中（覆盖 JS 内联定位） */
  .popup {
    left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%); max-width: 92vw;
  }

  /* ---------- 底部导航 ---------- */
  .mob-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel); border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  }
  .mob-nav button {
    flex: 1; background: transparent; border: none; color: var(--muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; padding: 6px 0;
  }
  .mob-nav button .ic { font-size: 20px; line-height: 1; }
  .mob-nav button.active { color: var(--accent); font-weight: 700; }

  /* 悬浮添加按钮 */
  .mob-fab {
    position: fixed; right: 16px;
    bottom: calc(56px + env(safe-area-inset-bottom) + 14px);
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--accent); color: #fff; border: none;
    font-size: 30px; line-height: 1; z-index: 45;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(47, 128, 237, 0.45);
  }
  .mob-fab:active { background: var(--accent-press); transform: scale(0.95); }

  /* ---------- 底部操作面板（sheet） ---------- */
  .mob-sheet-mask {
    position: fixed; inset: 0; background: rgba(15, 25, 40, 0.45);
    z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .mob-sheet-mask.show { opacity: 1; pointer-events: auto; }
  .mob-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--panel); border-radius: 18px 18px 0 0;
    padding: 6px 14px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform 0.25s ease;
    max-height: 78vh; overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  }
  .mob-sheet.show { transform: translateY(0); }
  .mob-sheet-head {
    text-align: center; font-size: 12px; font-weight: 700; color: var(--muted);
    padding: 12px 0 6px; position: relative;
  }
  .mob-sheet-head::after {
    content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--border);
  }
  .mob-sheet-sec { font-size: 11px; color: var(--muted-2); margin: 10px 4px 4px; }
  .mob-sheet-btn {
    display: block; width: 100%; text-align: left;
    background: var(--panel-2); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: 14px 14px; margin: 6px 0;
    font-size: 14.5px; color: var(--text);
  }
  .mob-sheet-btn:active { background: var(--row-hover); }
  .mob-sheet-btn:disabled { opacity: 0.45; }
  .mob-sheet-btn b { color: var(--accent); }
  .mob-sheet-btn.mob-cancel {
    text-align: center; color: var(--danger); font-weight: 600; margin-top: 12px;
  }

  /* 登录页窄屏 */
  .login-card { width: auto; max-width: 92vw; padding: 22px 18px 18px; }
}

/* 触摸设备：移动端按钮/输入框可点区放大 */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .mob-nav button { padding: 8px 0; }
  .mob-sheet-btn { padding: 16px 14px; }
  .trip-item { padding: 14px 14px; }
  .modal .field input, .modal .field select { padding: 11px 12px; font-size: 16px; }
  .mob-fab { width: 58px; height: 58px; font-size: 32px; }
}