/* All H5 business pages use the same phone-sized canvas.
   Include this as the last stylesheet in every new H5 page. */
html { background: #e9eff6; }
body {
  width: min(100%, 430px);
  min-width: 0;
  min-height: 100dvh;
  margin: 0 auto;
  background: #f4f6f9;
  box-shadow: 0 0 0 1px #e1e8f0, 0 16px 45px rgba(25, 45, 80, .08);
  overflow-x: clip;
}
body > .topbar {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 58px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  padding: 10px 14px;
}
.topbar .brand { min-width: 0; }
.topbar .brand strong { overflow-wrap: anywhere; }
.topbar .top-links {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin: 0;
  padding-top: 3px;
  overflow-x: auto;
  white-space: nowrap;
}
.topbar > a { min-width: 0; margin-left: auto; font-size: 12px; }
.topbar .stage { display: none; }
body > main,
body > .layout,
body > .workflow-page,
body > .cashier-layout,
body > .list-layout,
body > .invoice-board {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 12px 10px 32px;
}
.layout { display: flex; flex-direction: column; gap: 12px; }
.layout > *, .cashier-grid > *, .invoice-workflow > * { min-width: 0; }
.summary-card { position: static; width: 100%; }
.cashier-grid, .invoice-columns, .invoice-workflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cashier-pair, .two-col { grid-template-columns: minmax(0, 1fr); }
.cashier-source, .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-card section { padding: 15px; }
.card-head { padding: 17px 18px; }
.actions { padding: 15px 15px 8px; }
.submit-note { padding: 0 15px 17px; }
.workflow-item dl, .request-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-list { grid-template-columns: minmax(0, 1fr); }
.panel { padding: 14px; }
.hero { padding: 18px; }
.hero h1 { font-size: 21px; }
.dialog-fields { grid-template-columns: minmax(0, 1fr); }
.detail-item, .payment-detail-item { flex-wrap: wrap; }
dialog, .contract-dialog { width: min(410px, calc(100vw - 20px)); }
.receipt-dialog, .detail-page { width: min(410px, calc(100vw - 20px)); }
.invoice-board .board-heading { display: block; padding: 16px 18px; }
.board-heading > div:last-child { margin-top: 9px; line-height: 1.8; }
.board-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.board-tools input { grid-column: 1 / -1; width: 100%; }
.board-count { align-self: center; text-align: right; }
.board-tabs { overflow-x: auto; white-space: nowrap; }
.board-scroll { overflow: visible; }
.board-table, .board-table tbody { display: block; width: 100%; min-width: 0; }
.board-table thead { display: none; }
.board-table tbody { padding: 10px; }
.board-table tbody tr {
  display: block;
  margin-bottom: 9px;
  padding: 9px 12px;
  border: 1px solid #e6edf5;
  border-radius: 10px;
  background: #fff;
}
.board-table tbody tr:last-child { margin-bottom: 0; }
.board-table td {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 2px;
  border: 0;
  font-size: 12px;
}
.board-table td:first-child { display: block; padding-bottom: 10px; border-bottom: 1px solid #edf1f5; }
.board-table td:first-child strong { font-size: 14px; }
.board-table td:nth-child(2)::before { content: '付款记录'; color: #7d8da0; white-space: nowrap; }
.board-table td:nth-child(3)::before { content: '已来专票'; color: #7d8da0; white-space: nowrap; }
.board-table td:nth-child(4)::before { content: '待收专票'; color: #7d8da0; white-space: nowrap; }
.board-table td:nth-child(5)::before { content: '登记专票'; color: #7d8da0; white-space: nowrap; }
.board-table .payment-link { justify-content: flex-end; text-align: right; }
.payment-line, .amount-strip { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
.payment-details ul { max-width: min(330px, calc(100vw - 50px)); }
.row { grid-template-columns: minmax(0, 1fr); }
.row .field:first-child, .row .field:last-child { padding: 0; border-left: 0; }
.row .field label { width: 86px; min-width: 86px; }
.field label, .field-label { overflow-wrap: anywhere; }
.permit { width: 100%; padding: 25px 20px; }
@media (max-width: 430px) {
  html { background: #f4f6f9; }
  body { box-shadow: none; }
}