/* 车辆业务管理系统 —— 移动优先样式，无外部依赖（店内 WiFi 可能没有外网，
   用 CDN 会导致页面完全裸奔，所以样式全部自带）。 */

:root {
  --navy: #1f4e78;
  --navy-d: #173d5e;
  --line: #d7dee6;
  --bg: #f2f5f8;
  --card: #fff;
  --text: #1c2733;
  --muted: #64748b;
  --ok: #166534;
  --ok-bg: #dcfce7;
  --err: #991b1b;
  --err-bg: #fee2e2;
  --warn: #92400e;
  --warn-bg: #fef3c7;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei",
               "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

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

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--navy); color: #fff;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.brand { color: #fff; font-weight: 700; font-size: 16px; flex: 1; }
.brand:hover { text-decoration: none; }
.menu-toggle {
  background: rgba(255,255,255,.14); color: #fff; border: 0;
  font-size: 20px; line-height: 1; padding: 7px 11px; border-radius: 8px;
  cursor: pointer;
}
.who { text-align: right; font-size: 12px; line-height: 1.25; }
.who-name { display: block; font-weight: 600; }
.who-role { opacity: .8; }

/* 语言切换。栏顶这条是深色底，所以是白字 + 半透明白块。
   当前用的那种语言不给链接（点了也没用），做成一块实心的标出来。 */
.lang-switch { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.lang-switch a, .lang-switch .cur {
  color: #fff; padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}
.lang-switch a { background: rgba(255,255,255,.12); }
.lang-switch a:hover { text-decoration: none; background: rgba(255,255,255,.26); }
.lang-switch .cur { background: rgba(255,255,255,.32); font-weight: 600; }

/* 登录页整页是浅色的，白字会看不见，单独调一版 */
.login-wrap .lang-switch { justify-content: center; margin-bottom: 14px; }
.login-wrap .lang-switch a, .login-wrap .lang-switch .cur { color: var(--navy); }
.login-wrap .lang-switch a { background: rgba(0,0,0,.06); }
.login-wrap .lang-switch a:hover { background: rgba(0,0,0,.13); }
.login-wrap .lang-switch .cur { background: rgba(0,0,0,.16); }

/* ---------------- 布局 ---------------- */
.shell { display: flex; align-items: flex-start; }

.nav {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
  width: 250px; padding: 14px 8px;
  background: #fff; border-right: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .2s ease;
}
body.nav-open .nav { transform: none; }
.backdrop {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.4);
}
body.nav-open .backdrop { display: block; }

.nav a {
  display: block; padding: 11px 12px; border-radius: 8px;
  color: var(--text); font-size: 15px;
}
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav-group {
  font-size: 11px; letter-spacing: .1em; color: var(--muted);
  text-transform: uppercase; padding: 14px 12px 4px;
}
.nav-out { color: var(--err) !important; margin-top: 10px; }

.content { flex: 1; min-width: 0; padding: 14px; padding-bottom: 60px; }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav {
    position: sticky; top: 56px; transform: none;
    height: calc(100vh - 56px); width: 230px; flex: 0 0 230px;
  }
  .backdrop { display: none !important; }
  .content { padding: 20px 24px; }
}

/* ---------------- 页头 ---------------- */
.page-head {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.page-head h1 { font-size: 20px; margin: 0; flex: 1; }
.page-head .sub { color: var(--muted); font-size: 13px; }

/* ---------------- 卡片 ---------------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 14px;
}
.card h2 { font-size: 15px; margin: 0 0 12px; color: var(--navy); }

/* 用户权限页：十六个权限平铺一列太长，按组分块、每组两列。 */
.perm-group { margin-top: 14px; }
.perm-group h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.perm-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 700px) { .perm-list { grid-template-columns: 1fr 1fr; } }
.perm-list label { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.perm-list input { margin: 0; flex: none; }

/* 主页分成上下两个板块，各带一个小标题（总数据 / 月数据）。 */
.sect {
  font-size: 14px; margin: 0 0 10px; color: var(--navy);
  padding-bottom: 6px; border-bottom: 2px solid var(--line);
}
/* 月数据那行右边挂个月份下拉，换月份整块跟着换 */
.sect-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 20px 0 10px;
}
.sect-head .sect { margin: 0; border: 0; padding: 0; flex: 1; }
.ym-pick { display: flex; align-items: center; gap: 6px; }
.ym-pick label { font-size: 12px; color: var(--muted); }
.ym-pick select { min-width: 130px; }

.stats {
  display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stats { grid-template-columns: repeat(6, 1fr); } }

.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 2px; }
.stat .v.sm { font-size: 17px; }
.stat.warn .v { color: var(--err); }
.stat.ok .v { color: var(--ok); }

/* 卡片整张是链接（主页那些数点了能进明细）。里面只有一个数，所以整个
   <a> 包住没问题 —— 一个卡里放两个链接才不能这么写。
   .stat.ok .v 那几条选择器权重比下面的 a 高，绿色红色不受影响，
   hover 时给下划线就是「这里能点」的信号。 */
a.stat { display: block; color: inherit; text-decoration: none; }
a.stat:hover { border-color: var(--navy); }
a.stat:hover .v { text-decoration: underline; }
a.stat:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%; border-collapse: collapse; background: #fff; font-size: 14px;
}
table.data th, table.data td {
  padding: 9px 10px; border-bottom: 1px solid var(--line);
  text-align: left; white-space: nowrap;
}
table.data th {
  background: #eef3f8; color: var(--navy); font-weight: 600; font-size: 13px;
  position: sticky; top: 0;
}
table.data tbody tr:hover { background: #f8fafc; }
/* 整行可点（财务统计点进去看明细）。鼠标变成手型才看得出这一行能点，
   窄屏下表格变成卡片，一样有效。 */
table.data tr.row-link { cursor: pointer; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .empty { text-align: center; color: var(--muted); padding: 28px; }

/* 车辆列表的车架号 / 客户名：宽屏只露一小截（悬停看全，车架号还能点一下
   复制），窄屏整条显示 —— 窄屏是卡片排版、横向放得下，而且**手机没有悬停
   这回事**，截短了就再也看不到全的（业主 2026-10-07 定的）。
   默认那条故意写在媒体查询外头：不认媒体查询的老浏览器也走「只露一小截」
   这条路 —— 宁可少露，也别让 17 位车架号把整张表撑爆。 */
.tbl-full { display: none; }
@media (max-width: 720px) {          /* 跟上面「表格变卡片」的断点保持一致 */
  .tbl-short { display: none; }
  .tbl-full { display: inline; }
}

/* 能点一下复制的那一截：手型 + 悬停变色，让人看得出这儿能点 */
[data-copy] { cursor: pointer; }
[data-copy]:hover { color: var(--navy); }

/* 窄屏把表格变成卡片，避免横向滚动看不全 */
@media (max-width: 720px) {
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 8px; padding: 6px 2px; background: #fff;
  }
  table.data td {
    border: 0; padding: 5px 12px; white-space: normal;
    display: flex; justify-content: space-between; gap: 12px;
  }
  table.data td::before {
    content: attr(data-label);
    color: var(--muted); font-size: 12px; flex: 0 0 auto;
  }
  table.data td.num { text-align: right; }
  table.data td.wide { display: block; }
}

/* ---------------- 表单 ---------------- */
.form-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .span2 { grid-column: 1 / -1; }

/* 一行的轻量表单（「加一个人」这种：几个小框 + 按钮）。
   桌面上一排放下，手机放不下会自动换行。 */
.form-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-inline label.f { flex: 0 0 auto; }
.form-inline label.f input { width: 128px; }
.form-inline label.f select { width: 128px; }
.form-inline label.f:first-child input { width: 150px; }
.form-inline label.f input[type=date] { width: 150px; }
.form-inline .btn { flex: 0 0 auto; }

label.f { display: block; }
label.f > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
label.f .hint { font-size: 12px; color: var(--muted); margin-top: 3px; }

input[type=text], input[type=password], input[type=date], input[type=number],
input[type=search], select, textarea {
  width: 100%; padding: 10px 11px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(31,78,120,.35); outline-offset: -1px; border-color: var(--navy);
}
textarea { min-height: 68px; resize: vertical; }
input[readonly] { background: #f1f5f9; color: var(--muted); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 9px 16px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--text); cursor: pointer;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--navy-d); }
.btn-danger { background: #fff; border-color: #f0b4b4; color: var(--err); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.row-actions { display: flex; gap: 6px; align-items: flex-start; }

/* 可点击切换「万 / 精确值」的金额 */
[data-exact] { cursor: pointer; }

/* 可点击复制的文本（付款流水里的长客户名） */
.copy-name { cursor: pointer; }
.copy-name:hover { text-decoration: underline dotted; }
.copy-name.copied { color: var(--ok); }

/* 表格行里的「改价」：点开是个小面板，盖在表格上，
   不能把同一行另外两个按钮挤变形。 */
.inline-edit { position: relative; }
.inline-edit > summary { list-style: none; cursor: pointer; user-select: none; }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit[open] > form {
  position: absolute; z-index: 20; right: 0; top: calc(100% + 4px);
  display: flex; gap: 6px; align-items: center; white-space: nowrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.inline-edit[open] > form input { width: 160px; }

/* 签合同时挑车：先按车牌中间的数字筛，再从列表里一条条点选。
   列表由后端渲染好，筛选和选中都只是切 class，不重建 DOM。 */
.pick-filter { width: 100%; margin-bottom: 8px; }
.pick-list {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.pick-item {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: #fff; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.pick-item:last-of-type { border-bottom: 0; }
.pick-item:hover { background: #f6f8fb; }
.pick-item.picked { background: #eef3fa; }
.pick-item[hidden] { display: none; }     /* flex 会盖掉 hidden，得自己说一句 */
.pick-plate { font-weight: 600; color: var(--navy); white-space: nowrap; }
.pick-meta { flex: 1; font-size: 12px; color: var(--muted); }
.pick-add { font-size: 13px; font-weight: 600; color: var(--navy); white-space: nowrap; }
.pick-item.picked .pick-add { color: var(--muted); }
.pick-empty { padding: 14px 12px; font-size: 13px; color: var(--muted); }

.pick-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 8px 10px; margin-bottom: 6px;
  background: #f6f8fb; border: 1px solid var(--line); border-radius: var(--radius);
}
.pick-row .pick-name { flex: 1 1 100%; font-weight: 600; }
.pick-row input[type=text] { flex: 1 1 140px; min-width: 0; }

@media (min-width: 640px) {
  /* 宽屏上把车牌和价格摆回同一行，省地方 */
  .pick-row { flex-wrap: nowrap; }
  .pick-row .pick-name { flex: 0 0 auto; min-width: 150px; }
}

/* 合同表单「客户名称」的打字候选。候选整批由后端渲染在 .cust-menu 里，
   JS 只负责本地过滤和显隐 —— 全站没有 AJAX（跟上面 .pick-list 一个路子）。

   定位靠 .cust-wrap 撑住：它是输入框外面那层，position:relative 之后浮层
   才贴得住输入框下沿。这条依赖**不能**指望祖先不给 overflow:hidden —— 现在
   .card / .form-grid / .content 都没有，将来谁加一个，浮层会被静默裁掉
   （不报错，就是看不见）。 */
label.f > .cust-wrap {
  /* label.f > span 那条通用样式会把这一层也染成 13px 灰、还顶下 4px ——
     这里得显式还原，否则候选文字整片变小变灰 */
  position: relative; display: block;
  margin-bottom: 0; font-size: inherit; color: inherit;
}
.cust-menu {
  /* 30：盖得住卡片里的内容（.inline-edit 是 20），又不至于压住吸顶的
     顶栏（.topbar 是 40）。浮层只往下弹，跟顶栏本来也打不着。 */
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.cust-menu[hidden] { display: none; }
.cust-item {
  display: flex; gap: 10px; align-items: baseline; width: 100%;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line);
  background: #fff; font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.cust-item:last-of-type { border-bottom: 0; }
.cust-item:hover, .cust-item.active { background: #f6f8fb; }
.cust-item[hidden] { display: none; }   /* flex 会盖掉 hidden，得自己说一句 */
.cust-name { font-weight: 600; color: var(--navy); }
.cust-meta { flex: 1; font-size: 12px; color: var(--muted); text-align: right; }
.cust-empty { padding: 14px 12px; font-size: 13px; color: var(--muted); }

/* 合同详情页「加一台车」：筛选框单独一行，下拉和价格并排 */
.add-veh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.add-veh .veh-filter { flex: 1 1 100%; }
.add-veh select { flex: 1 1 200px; min-width: 0; }
.add-veh input[data-money] { width: 170px; }

.filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 12px;
}
.filters label { font-size: 12px; color: var(--muted); display: block; }
.filters input, .filters select { min-width: 130px; }

/* 日期区间那几个快捷按钮（本月 / 上月 / …）。挨着筛选栏摆，一点就换一段。
   当前的段用 btn-primary 标出来 —— 几个按钮长得一样，不标就不知道自己
   现在看的是哪一段。 */
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 12px; }

/* ---------------- 提示条 ---------------- */
.flashes { margin-bottom: 12px; }
.flash {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 14px;
  border: 1px solid transparent;
}
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: #b7e4c7; }
.flash.err { background: var(--err-bg); color: var(--err); border-color: #f5c2c2; }
.flash.warn { background: var(--warn-bg); color: var(--warn); border-color: #f5d98f; }

.notice {
  padding: 11px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 12px;
  background: var(--warn-bg); color: var(--warn); border: 1px solid #f5d98f;
}
.notice.info { background: #e0eefb; color: var(--navy); border-color: #b9d4ec; }
.notice.warn { background: var(--warn-bg); color: var(--warn); border-color: #f5d98f; }

/* 点车架号复制完弹一下的小提示（车辆列表用）。z-index 要盖过抽屉 ——
   .nav 是 60，手机上点完紧接着拉开抽屉的话，提示不该被压在下头。 */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 70;
  padding: 9px 18px; border-radius: 999px; font-size: 14px;
  background: rgba(28, 39, 51, .92); color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  pointer-events: none;              /* 别挡住底下的按钮 */
}
.toast[hidden] { display: none; }

/* ---------------- 详情页字段表 ---------------- */
.kv { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .kv { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
.kv .item {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
}
.kv .item .k { color: var(--muted); font-size: 13px; flex: 0 0 auto; }
.kv .item .v { text-align: right; word-break: break-word; }

/* ---------------- 批次录入网格 ---------------- */
.intake-row {
  display: grid; gap: 8px; grid-template-columns: 1fr 1fr;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
}
@media (min-width: 760px) {
  .intake-row { grid-template-columns: 2.2fr 1fr 1.2fr; }
}

/* ---------------- 登录页 ---------------- */
.login-wrap {
  max-width: 360px; margin: 8vh auto; padding: 0 18px;
}
.login-wrap .card { padding: 26px 22px; }
.login-wrap h1 { font-size: 19px; margin: 0 0 4px; color: var(--navy); }
.login-wrap .sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.login-wrap .btn { width: 100%; }
.login-wrap label.f { margin-bottom: 12px; }

/* ---------------- 分页 ---------------- */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 14px; }
.pager a, .pager span {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; font-size: 14px;
}
.pager .cur { background: var(--navy); color: #fff; border-color: var(--navy); }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: #eef3f8; color: var(--navy);
}
.tag.sold { background: var(--ok-bg); color: var(--ok); }
.tag.onsale { background: #e0eefb; color: var(--navy); }
.tag.none { background: var(--err-bg); color: var(--err); }
.tag.owe { background: var(--err-bg); color: var(--err); }     /* 还欠着钱 */
.tag.used { background: var(--warn-bg); color: var(--warn); }  /* 二手车（没有首保） */
.tag.clear { background: var(--ok-bg); color: var(--ok); }     /* 已收清 */

/* ---------------- 参数表导入预览 ---------------- */
/* 预览表每格一个输入框，让它撑满单元格，不然缩成一小截看不清车架号 */
table.data td input { width: 100%; }
/* 车架号已经在库里的行 —— 这些车确认时会跳过，铺个淡黄底一眼认出来 */
table.data tbody tr.dup { background: #fff7ed; }
table.data tbody tr.dup:hover { background: #feefdc; }


/* ---------------- 发票照片（业主 2026-10-17） ---------------- */
/* 表单里的缩略图：一条费用可能挂好几张，横着排、放不下就换行。
   点缩略图在新窗口看原图 —— 原图走的是鉴权路由，不在 static 里。 */
.photo-block { margin-top: 10px; }
.photo-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.photo-item { position: relative; display: flex; flex-direction: column;
              align-items: center; gap: 4px; }
.photo-item a { display: block; }
.photo-item img {
  width: 84px; height: 84px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; display: block;
  background: var(--bg); transition: opacity .15s, filter .15s;
}
/* 删除：右上角一个小圆叉。点一下 = 标记（照片变灰 + 叉变红），再点恢复。
   真删要等「保存」—— 跟别的字段一个规矩，而且点错了随时撤回得了。 */
.photo-del {
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); user-select: none;
}
.photo-del:hover { color: var(--err); border-color: var(--err); }
.photo-del input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* 标记删除 = 直接从画面上拿掉（业主 2026-10-17 要的：点了就不见了）。
   checkbox 还在表单里，保存时才真删；下面那条提示给个撤销的退路。 */
.photo-item.is-del { display: none; }
.photo-undo {
  margin: 6px 0 0; font-size: 13px; color: var(--err);
}
.photo-undo a { margin-left: 6px; color: var(--navy); cursor: pointer;
                text-decoration: underline; }

/* 列表那一列：只摆小方图，一格里并排放（多张时最多看到几张就占多宽）。
   34px 够认出"有发票、大概长什么样"，具体内容点开看。 */
.photo-thumbs { display: inline-flex; gap: 3px; }
.photo-thumbs img {
  width: 34px; height: 34px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 4px; display: block;
  background: var(--bg);
}

/* 文档附件（PDF / Word / Excel，业主 2026-10-27 要的）。
   文档没法画缩略图，摆一个和照片同尺寸的卡片，显示原始文件名。
   .photo-item a 默认是 block，这里要 display:flex 盖回来。 */
.photo-item a.file-chip {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; padding: 6px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  font-size: 11px; line-height: 1.25; text-align: center;
  overflow: hidden; word-break: break-all; color: var(--navy);
}
.photo-item a.file-chip:hover { text-decoration: underline; }
/* 列表页那一格只有 34px，摆不下文件名，只给一个文件图标 */
.photo-thumbs a.file-chip-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); font-size: 15px; text-decoration: none;
}