/* app.css — 管家端共享样式（移动优先，320px 起无横向滚动，按钮随文档流不被键盘遮挡） */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  /* 复审二⑬：补充国产机常见中文字体栈 */
  font-family: -apple-system, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  background: #f3f4f6; color: #111827; font-size: 15px;
  overflow-x: hidden;
}
/* 复审二⑪：底部留出安全区（刘海屏 Home 指示条），不使用 100vh */
.wrap { max-width: 480px; margin: 0 auto; padding: 12px 12px calc(48px + env(safe-area-inset-bottom)); }
h1 { font-size: 19px; margin: 8px 0 12px; }
h2 { font-size: 16px; margin: 18px 0 8px; }
a { color: #2563eb; text-decoration: none; }

/* 复审二⑲：顶部导航单行横向滚动，「退出」固定右端不换行 */
nav.topnav {
  display: flex; flex-wrap: nowrap; gap: 6px; align-items: center;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom) * 0); border-bottom: 1px solid #e5e7eb; margin-bottom: 10px;
  scrollbar-width: none;
}
nav.topnav::-webkit-scrollbar { display: none; }
nav.topnav a { padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #e5e7eb; font-size: 13px; flex: 0 0 auto; }
nav.topnav a.cur { background: #2563eb; color: #fff; border-color: #2563eb; }
nav.topnav .spacer { flex: 1 0 auto; min-width: 4px; }
nav.topnav .who { font-size: 12px; color: #6b7280; flex: 0 0 auto; }
nav.topnav .logout { flex: 0 0 auto; }

.card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px; margin-bottom: 10px; overflow-wrap: anywhere;
}
.row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.row .k { color: #6b7280; flex-shrink: 0; }
.row .v { text-align: right; min-width: 0; }
.muted { color: #6b7280; font-size: 13px; }
.big { font-size: 20px; font-weight: 700; white-space: nowrap; }

.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; }
.badge.vacant { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge.occupied { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.draft { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.badge.sent { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge.paid_claimed { background: #fdf2f8; color: #be185d; border-color: #fbcfe8; }
.badge.paid { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge.void { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.badge.ended { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.badge.pending { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge.approved { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge.rejected { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.badge.reimbursed { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }

.warn-box { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 10px; margin-bottom: 10px; font-size: 13px; }
.info-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 10px; padding: 10px; margin-bottom: 10px; font-size: 13px; }

label.f { display: block; margin: 10px 0 2px; font-size: 13px; color: #374151; }
/* 复审二⑩：grid 子项与表单控件 min-width:0，修复 320px 溢出 */
input, select, textarea {
  width: 100%; min-width: 0; padding: 10px; border: 1px solid #d1d5db; border-radius: 10px;
  font-size: 16px; /* 防 iOS 聚焦自动放大 */
  background: #fff;
}
input[type="checkbox"] { width: auto; transform: scale(1.3); margin-right: 6px; }
input[type="file"] { padding: 8px; font-size: 14px; }

button, .btn {
  display: inline-block; border: none; border-radius: 10px; padding: 11px 14px;
  font-size: 15px; background: #2563eb; color: #fff; cursor: pointer; text-align: center;
}
button.secondary, .btn.secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; }
button.danger { background: #dc2626; }
button.small { padding: 7px 10px; font-size: 13px; }
button:disabled { opacity: 0.5; }
/* 复审二⑪：底部按钮组同样留出安全区 */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-bottom: env(safe-area-inset-bottom); }
.btn-row button, .btn-row .btn { flex: 1 1 auto; min-width: 0; }
button.block { width: 100%; margin-top: 12px; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; max-width: 92vw; padding: 10px 14px; border-radius: 10px;
  background: #111827; color: #fff; font-size: 14px; z-index: 99; display: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25); overflow-wrap: anywhere;
}
#toast.err { background: #b91c1c; }
#toast.ok { background: #047857; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid2 > * { min-width: 0; }
.thumb { max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; }
hr.sep { border: none; border-top: 1px solid #e5e7eb; margin: 10px 0; }

/* 复审二⑯：房间三态点（本期已抄表/已出账/已收款） */
.dots { display: inline-flex; gap: 8px; align-items: center; }
.dot { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #9ca3af; }
.dot::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; }
.dot.on { color: #047857; }
.dot.on::before { background: #10b981; }

/* 复审二⑧：拍照/相册双入口 */
.photo-input .btn-row { margin-top: 4px; padding-bottom: 0; }
.photo-input .fname { margin-top: 4px; font-size: 12px; color: #6b7280; overflow-wrap: anywhere; }

/* 复审二⑰：缩略图点击放大 */
#lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 100;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* 阶段 5：房东看板 */
.progress { background: #e5e7eb; border-radius: 999px; height: 12px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: #2563eb; border-radius: 999px; transition: width .3s; }
.todo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.todo {
  display: block; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 10px 12px; text-decoration: none; color: inherit;
}
.todo .n { font-size: 20px; font-weight: 700; }
.todo .t { font-size: 12px; color: #6b7280; }
.todo.alert .n { color: #dc2626; }
.todo.ok .n { color: #047857; }
.todo.idle { background: #f9fafb; }
.todo.idle .n { color: #9ca3af; }
.todo.idle .t { color: #9ca3af; }
.sum-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sum-table th, .sum-table td { padding: 6px 8px; border-bottom: 1px solid #f3f4f6; text-align: right; white-space: nowrap; }
.sum-table th:first-child, .sum-table td:first-child { text-align: left; }
.sum-table tr.month { cursor: pointer; }
.sum-table tr.month:hover { background: #f9fafb; }
.sum-table td.pos { color: #047857; }
.sum-table td.neg { color: #dc2626; }
.table-wrap { overflow-x: auto; }
@media (min-width: 700px) { .todo-grid { grid-template-columns: repeat(4, 1fr); } }