/* Shared phone / mini-program WebView layout. Desktop tables keep their layout. */
@media screen and (max-width: 768px) {
  :root { --mobile-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); }
  html, body, #app { width:100%; min-width:0; }
  .mobile-admin-shell, .mobile-shell { width:100%; min-width:0; padding-bottom:calc(var(--mobile-nav-height) + 16px); }
  .mobile-admin-nav, .mobile-bottom {
    position:fixed!important; top:auto!important; bottom:0!important;
    height:var(--mobile-nav-height)!important; padding-bottom:env(safe-area-inset-bottom, 0px);
    z-index:20;
  }
  .mobile-admin-nav { left:0; right:0; width:100%; }
  .mobile-admin-nav { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
  .mobile-bottom { padding-top:7px; }
  .mobile-admin-nav-item { min-width:0; padding:7px 2px; }
  .mobile-admin-content, .mobile-admin-page, .mobile-form, .panel, .mobile-card,
  .field, .form-grid, .toolbar, .toolbar > *, .page-head > *, .csearch { min-width:0; max-width:100%; }
  .mobile-admin-header { gap:8px; }
  .mobile-admin-brand, .mobile-admin-brand > div:last-child { min-width:0; }
  .mobile-admin-title, .mobile-name, .order-meta, .order-title, .order-row strong { overflow-wrap:anywhere; }
  .page-head, .panel-title, .order-row { flex-wrap:wrap; gap:10px; }
  .page-head { align-items:flex-start; }
  .page-head > .btn, .page-head > .actions { flex-shrink:0; }
  .toolbar { align-items:stretch; }
  .toolbar .search, .toolbar .csearch { flex:1 1 100%; width:100%; min-width:0!important; }
  .toolbar > input, .toolbar > select { min-width:0!important; max-width:100%; }
  .date-range { flex-wrap:wrap; white-space:normal; min-width:0; }
  .date-range input { min-width:0; max-width:100%; flex:1 1 110px; }
  .actions, .legend { flex-wrap:wrap; }
  .btn, .link { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
  .form-grid { grid-template-columns:minmax(0,1fr)!important; }
  input, select, textarea { max-width:100%; min-width:0; }
  .table-wrap, .mobile-admin-content .table-wrap, .warehouse-detail-modal .table-wrap {
    width:100%; min-width:0; max-width:100%; overflow:visible;
  }
  /* Every original field is visible, including columns hidden by older phone rules. */
  body #app table.mobile-fit-table, body .modal table.mobile-fit-table {
    display:block; width:100%!important; min-width:0!important; max-width:100%; table-layout:auto;
  }
  body table.mobile-fit-table > thead {
    display:block!important; position:absolute; width:1px; height:1px; padding:0;
    margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap;
  }
  body table.mobile-fit-table > tbody, body table.mobile-fit-table > tfoot { display:block; width:100%; }
  body table.mobile-fit-table > :is(tbody,tfoot) > tr {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px;
    width:100%; padding:14px 12px; margin:0 0 12px; background:#fff;
    border:1px solid var(--line); border-radius:10px; min-width:0;
  }
  body #app table.mobile-fit-table > :is(tbody,tfoot) > tr > :is(td,th),
  body .modal table.mobile-fit-table > :is(tbody,tfoot) > tr > :is(td,th) {
    display:flex!important; flex-direction:column; align-items:flex-start; gap:4px;
    width:auto!important; min-width:0!important; max-width:100%!important; padding:0!important;
    border:0; white-space:normal!important; overflow-wrap:anywhere; word-break:normal;
    text-align:left!important; vertical-align:top; font-size:13px; line-height:1.6;
  }
  body table.mobile-fit-table > :is(tbody,tfoot) > tr > :is(td,th)::before {
    content:attr(data-mobile-label); display:block; font-size:11px; font-weight:400; color:var(--muted); line-height:1.5;
  }
  body table.mobile-fit-table > :is(tbody,tfoot) > tr > :is(td,th):first-child,
  body table.mobile-fit-table > :is(tbody,tfoot) > tr > .mobile-table-full { grid-column:1 / -1; }
  body table.mobile-fit-table .mobile-table-full[colspan]::before { content:none; }
  body table.mobile-fit-table td > *, body table.mobile-fit-table th > * { min-width:0; max-width:100%; }
  body table.mobile-fit-table td .actions { width:100%; gap:6px 12px; }
  body table.mobile-fit-table td .link { min-height:32px; padding:5px 0; white-space:normal; }
  body table.mobile-fit-table tfoot tr, body table.mobile-fit-table tr.rc-total-row { background:#f1f6fc; font-weight:700; }

  /* 收货登记卡片：按业务阅读顺序排成「单号/日期、员工/客户/数量、明细、状态/操作」。 */
  body #app table.receive-list-table > tbody > tr {
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px 8px; padding:14px 12px; align-items:start;
  }
  body #app table.receive-list-table > tbody > tr > :is(td,th) {
    min-width:0!important; overflow-wrap:anywhere;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(1) {
    order:1; grid-column:span 3!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(2) {
    order:2; grid-column:span 3!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(3) {
    order:4; grid-column:span 2!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(4) {
    order:6; grid-column:1 / -1!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(5) {
    order:5; grid-column:span 2!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(6) {
    order:3; grid-column:span 2!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(7) {
    order:7; grid-column:span 2!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(8) {
    order:8; grid-column:span 4!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(8) {
    display:block!important;
  }
  body #app table.receive-list-table > tbody > tr > :nth-child(8) .link {
    display:inline-flex; min-height:28px; padding:3px 5px; margin-right:6px;
    white-space:nowrap; font-size:13px;
  }
  body .modal-backdrop { padding:8px; z-index:100; }
  body .modal { min-width:0; max-width:100%; max-height:calc(100dvh - 16px); }
  body .modal .modal-head, body .modal .modal-body, body .modal .modal-foot { padding-left:12px; padding-right:12px; min-width:0; }
  body .modal .modal-head { gap:10px; }
  body .modal .modal-head h3 { min-width:0; overflow-wrap:anywhere; }
  body .modal .modal-head .close { flex:0 0 30px; }
  body .modal .modal-foot { flex-wrap:wrap; }
  body .modal label { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  body .modal label > span { min-width:0; max-width:100%; flex-shrink:1!important; white-space:normal; }
  body #recon-export-mask > div { box-sizing:border-box; width:100%!important; max-width:100%!important; padding:16px!important; overflow-x:hidden!important; }
  body #recon-export-mask > div > div[style*="display:flex"] { flex-wrap:wrap!important; min-width:0; }
  body #recon-export-mask > div label { flex:1 1 110px!important; min-width:0; }
  body #recon-export-mask > div input, body #recon-export-mask > div select { box-sizing:border-box!important; max-width:100%; }
  .mobile-detail-ro-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .mobile-detail-ro-grid > div, .warehouse-document-meta > div { min-width:0; overflow-wrap:anywhere; }
  body #biz-lines, body #driver-lines { min-width:0; max-width:100%; overflow:visible; }
  body #biz-lines .biz-line.biz-process-grouped-line,
  body #driver-lines .biz-line.biz-process-grouped-line {
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important;
    min-width:0!important; width:100%!important; gap:12px 8px!important;
  }
  body #biz-lines .biz-process-grouped-line > *, body #driver-lines .biz-process-grouped-line > * {
    grid-column:auto!important; grid-row:auto!important; min-width:0!important;
  }
  body #biz-lines .biz-process-grouped-line > :is(.biz-line-no,.biz-material-field,.biz-process-field,.biz-note-field),
  body #driver-lines .biz-process-grouped-line > :is(.biz-line-no,.biz-material-field,.biz-process-field,.biz-note-field) { grid-column:1 / -1!important; }
  body #biz-lines .biz-process-grouped-line > .biz-line-no,
  body #driver-lines .biz-process-grouped-line > .biz-line-no { padding-top:0!important; height:auto!important; line-height:1.5!important; }
  body #biz-lines .biz-process-grouped-line small,
  body #driver-lines .biz-process-grouped-line small,
  body #biz-lines .biz-process-grouped-line .biz-proc-values,
  body #driver-lines .biz-process-grouped-line .biz-proc-values { display:block!important; }
  body #biz-lines .biz-process-grouped-line .biz-proc-values,
  body #driver-lines .biz-process-grouped-line .biz-proc-values { display:flex!important; }
  body .warehouse-sale-head { display:none; }
  body .warehouse-sale-line:not(.dr-flex) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .warehouse-sale-line:not(.dr-flex) > span { grid-column:1 / -1; padding-top:0; }
  body .warehouse-sale-line:not(.dr-flex) .biz-proc-values { grid-column:1 / -1; }
  body .select-like { height:auto!important; min-height:40px!important; }
  body .select-like-text { white-space:normal!important; overflow:visible!important; text-overflow:clip!important; overflow-wrap:anywhere; min-width:0; }
  .finance-amount-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .finance-amount-summary > div:last-child { grid-column:1 / -1; }
  .receivable-detail-summary { grid-template-columns:minmax(0,1fr); }
  .receivable-detail-summary > span { flex-wrap:wrap; }
  .receivable-detail-summary strong { white-space:normal; overflow-wrap:anywhere; }
}

/* Driver order and receipt line fields use explicit rows to prevent grid collisions. */
@media screen and (max-width: 768px) {
  html body #app #driver-lines .biz-process-grouped-line {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important; grid-auto-flow:row!important;
    grid-auto-rows:minmax(0,auto)!important; row-gap:10px!important;
    width:100%!important; min-width:0!important; box-sizing:border-box!important;
  }
  html body #app #driver-lines .biz-process-grouped-line > * {
    grid-column:auto!important; grid-row:auto!important; min-width:0!important;
  }
  html body #app #driver-lines .biz-process-grouped-line > .biz-line-no { display:none!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-material-field { grid-column:1!important; grid-row:1!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-style-field { grid-column:2!important; grid-row:1!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-quantity-field { grid-column:1!important; grid-row:2!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-unit-field { grid-column:2!important; grid-row:2!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-color-field { grid-column:1 / -1!important; grid-row:3!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-process-field { grid-column:1 / -1!important; grid-row:4!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-note-field { grid-column:1 / -1!important; grid-row:5!important; }
  html body #app #driver-lines .biz-process-grouped-line > .biz-process-field .biz-proc-values { width:100%; box-sizing:border-box; }
}

/* Admin mini-program list cards: consistent label/value pairs and compact actions. */
@media screen and (max-width: 768px) {
  body #app .mobile-admin-page table.mobile-fit-table > tbody > tr {
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 12px;
    padding:12px; align-items:start; border-radius:11px;
  }
  body #app .mobile-admin-page table.mobile-fit-table > tbody > tr > :is(td,th) {
    display:flex!important; flex-direction:column; align-items:flex-start;
    min-width:0!important; max-width:100%!important; gap:3px;
    font-size:12px; line-height:1.5;
  }
  body #app .mobile-admin-page table.mobile-fit-table > tbody > tr > :is(td,th)::before {
    font-size:10px; line-height:1.35; color:#8492a5;
  }
  body #app .mobile-admin-page table.mobile-fit-table > tbody > tr > :is(td,th) > :is(strong,b) {
    font-size:13px; font-weight:600; line-height:1.45; overflow-wrap:anywhere;
  }
  body #app .mobile-admin-page table.mobile-fit-table td .actions { display:flex; flex-wrap:wrap; gap:4px 12px; }
  body #app .mobile-admin-page table.mobile-fit-table td .link { min-height:30px; padding:3px 0; font-size:12px; white-space:nowrap; }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(1),
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(1),
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(1),
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :nth-child(1) { grid-column:1!important; }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(2),
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(2),
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(2),
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :nth-child(2) { grid-column:2!important; }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(3),
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(3),
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(3),
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :nth-child(3) { grid-column:1!important; }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(4),
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(4),
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(4),
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :nth-child(4) { grid-column:2!important; }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(4) .actions,
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(4) .actions,
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(5) .actions,
  body #app .mobile-admin-page table.mobile-customer-table > tbody > tr > :last-child .actions,
  body #app .mobile-admin-page table.mobile-employee-table > tbody > tr > :last-child .actions,
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :last-child .actions { gap:3px 9px; }
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(5),
  body #app .mobile-admin-page table.mobile-customer-table > tbody > tr > :last-child,
  body #app .mobile-admin-page table.mobile-employee-table > tbody > tr > :last-child,
  body #app .mobile-admin-page table.mobile-process-table > tbody > tr > :last-child { grid-column:1 / -1!important; }
  body #app .mobile-admin-page table.mobile-report-table > tbody > tr,
  body #app .mobile-admin-page table.mobile-receivable-table > tbody > tr { gap:8px 10px; padding:11px; }
  body #app .mobile-admin-page table.mobile-report-table > tbody > tr > :is(td,th),
  body #app .mobile-admin-page table.mobile-receivable-table > tbody > tr > :is(td,th) { overflow-wrap:anywhere; }
  body #app .mobile-admin-page table.mobile-report-table > tbody > tr > .mobile-table-full,
  body #app .mobile-admin-page table.mobile-receivable-table > tbody > tr > .mobile-table-full { grid-column:1 / -1!important; }
  body #app .mobile-admin-page table.mobile-receivable-table td .btn { min-height:30px; padding:4px 8px; font-size:11px; }
}

/* Mobile management cards: keep the important fields grouped in reading order. */
@media screen and (max-width: 768px) {
  body #app table.mobile-material-table > tbody > tr {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px 8px; padding:13px 11px; align-items:start;
  }
  body #app table.mobile-material-table > tbody > tr > :is(td,th) {
    min-width:0!important; overflow-wrap:anywhere;
  }
  body #app table.mobile-material-table > tbody > tr > :nth-child(3) { order:1; grid-column:1!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(1) { order:2; grid-column:2!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(2) { order:3; grid-column:3!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(5) { order:4; grid-column:1!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(4) { order:5; grid-column:2!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(6) { order:6; grid-column:3!important; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(7) {
    order:7; grid-column:1 / -1!important; display:block!important;
    padding-top:8px!important; border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-material-table > tbody > tr > :nth-child(7)::before { margin-bottom:4px; }
  body #app table.mobile-material-table > tbody > tr > :nth-child(7) .actions {
    display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; width:100%;
  }
  body #app table.mobile-material-table > tbody > tr > :nth-child(7) .link {
    min-height:30px; padding:3px 0; white-space:nowrap; font-size:13px;
  }

  body #app table.mobile-delivery-table > tbody > tr,
  body #app table.mobile-recent-delivery-table > tbody > tr {
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
    gap:10px 8px; padding:13px 11px; align-items:start;
  }
  body #app table.mobile-delivery-table > tbody > tr > :is(td,th),
  body #app table.mobile-recent-delivery-table > tbody > tr > :is(td,th) {
    min-width:0!important; overflow-wrap:anywhere;
  }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(1),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(1) { order:1; grid-column:1!important; }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(2),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(2) { order:2; grid-column:2!important; }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(3),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(3) { order:3; grid-column:3!important; }

  /* Delivery quantities are the second line, with two goods shown side by side. */
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(5) {
    order:4; grid-column:1 / -1!important; display:block!important;
    padding-top:9px!important; border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(5)::before { margin-bottom:6px; }
  body #app table.mobile-delivery-table .delivery-line-editors {
    display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;
    width:100%; min-width:0!important;
  }
  body #app table.mobile-delivery-table .delivery-line-editor {
    display:grid!important; grid-template-columns:minmax(0,1fr) 48px auto;
    align-items:center; gap:4px; min-width:0; padding:6px 5px;
    border:1px solid #e7edf4; border-radius:7px; background:#f9fbfe;
    font-size:11px; line-height:1.4;
  }
  body #app table.mobile-delivery-table .delivery-line-editor > span:first-child {
    min-width:0; overflow-wrap:anywhere; color:#334155;
  }
  body #app table.mobile-delivery-table .delivery-line-editor > span:last-child { white-space:nowrap; color:#64748b; }
  body #app table.mobile-delivery-table .delivery-line-editor input {
    box-sizing:border-box; width:100%!important; min-width:0!important; max-width:100%;
    height:32px; padding:4px 5px; border:1px solid #cfd9e5; border-radius:5px;
    font-size:12px; text-align:center;
  }

  /* Actions, assigned driver and status share a clean final row. */
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(7),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(7) {
    order:5; grid-column:1!important; display:block!important;
    padding-top:8px!important; border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(4),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(4) {
    order:6; grid-column:2!important; padding-top:8px!important;
    border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-delivery-table > tbody > tr > :nth-child(6),
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(6) {
    order:7; grid-column:3!important; padding-top:8px!important;
    border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-delivery-table select,
  body #app table.mobile-recent-delivery-table select {
    box-sizing:border-box; width:100%; min-width:0!important; max-width:100%;
    height:34px; padding:4px 3px; font-size:11px;
  }
  body #app table.mobile-delivery-table td:nth-child(7) .link,
  body #app table.mobile-recent-delivery-table td:nth-child(7) .link {
    display:inline-flex; align-items:center; min-height:29px; padding:3px 4px;
    white-space:nowrap; font-size:12px;
  }

  /* The dashboard's recent orders use the same order/date/customer and footer rows. */
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(5) {
    order:4; grid-column:1 / -1!important; display:flex!important;
    padding-top:8px!important; border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(5)::before {
    flex:0 0 auto; margin:0 8px 0 0; padding-top:1px;
  }
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(7) {
    order:7; grid-column:1 / -1!important; display:block!important;
    padding-top:7px!important; border-top:1px solid #edf1f6!important;
  }
  body #app table.mobile-recent-delivery-table > tbody > tr > :nth-child(7) .actions {
    display:flex; flex-wrap:wrap; gap:4px 12px;
  }
}

@media screen and (max-width: 360px) {
  body #app table.mobile-material-table > tbody > tr,
  body #app table.mobile-delivery-table > tbody > tr,
  body #app table.mobile-recent-delivery-table > tbody > tr { padding:11px 9px; gap:8px 6px; }
  body #app table.mobile-material-table > tbody > tr > :is(td,th),
  body #app table.mobile-delivery-table > tbody > tr > :is(td,th),
  body #app table.mobile-recent-delivery-table > tbody > tr > :is(td,th) { font-size:12px; }
  body #app table.mobile-delivery-table .delivery-line-editor { grid-template-columns:minmax(0,1fr) 43px auto; gap:3px; padding:5px 4px; }
  body #app table.mobile-delivery-table .delivery-line-editor input { padding:4px 3px; font-size:11px; }
}

/* Recent delivery cards on the mobile management home. */
@media screen and (max-width: 768px) {
  .mobile-admin-recent-orders { padding:11px; margin-top:14px; }
  .mobile-admin-recent-orders .mobile-admin-panel-title { margin-bottom:8px; }
  .mobile-admin-recent-orders .mobile-admin-panel-title button { padding:3px 0; color:var(--blue); font-size:12px; }
  .mobile-recent-order { padding:10px 2px; border-top:1px solid #e8edf3; }
  .mobile-recent-order:first-of-type { border-top:0; }
  .mobile-recent-order-head { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr); gap:8px; min-width:0; }
  .mobile-recent-order-head>div, .mobile-recent-order-foot>div { display:grid; gap:3px; min-width:0; }
  .mobile-recent-order small { font-size:10px; line-height:1.3; color:var(--muted); }
  .mobile-recent-order b, .mobile-recent-order strong { font-size:12px; line-height:1.35; overflow-wrap:anywhere; min-width:0; }
  .mobile-recent-order-goods { margin-top:8px; padding-top:7px; border-top:1px solid #edf1f6; }
  .mobile-recent-goods-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin-top:5px; }
  .mobile-recent-goods-grid>span { display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; padding:5px 6px; border:1px solid #e6edf5; border-radius:6px; background:#f9fbfe; }
  .mobile-recent-goods-grid b { font-size:11px; font-weight:500; overflow-wrap:anywhere; }
  .mobile-recent-goods-grid em { font-size:10px; font-style:normal; color:var(--blue); white-space:nowrap; }
  .mobile-recent-order-foot { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr); gap:8px; align-items:start; margin-top:8px; padding-top:7px; border-top:1px solid #edf1f6; }
  .mobile-recent-order-foot .actions { display:flex; flex-wrap:wrap; gap:4px 10px; }
  .mobile-recent-order-foot .link { min-height:27px; padding:2px 0; font-size:12px; white-space:nowrap; }
  .mobile-recent-order-foot .status-badge { justify-self:start; max-width:100%; font-size:10px; }
}
@media screen and (max-width:360px) {
  .mobile-admin-recent-orders { padding:10px 9px; }
  .mobile-recent-order-head, .mobile-recent-order-foot { gap:6px; }
  .mobile-recent-goods-grid>span { padding:4px 5px; }
}

/* Put maintenance actions in a consistent footer row on simple reference cards. */
@media screen and (max-width: 768px) {
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(4),
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(4),
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(5) {
    order:8; grid-column:1 / -1!important; display:block!important;
    padding-top:8px!important; border-top:1px solid #edf1f6!important;
    display:flex!important; flex-direction:row!important; flex-wrap:wrap; align-items:center; gap:4px 12px;
  }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(4)::before,
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(4)::before,
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(5)::before {
    flex:0 0 100%;
  }
  body #app .mobile-admin-page table.mobile-category-table > tbody > tr > :nth-child(4) > .link,
  body #app .mobile-admin-page table.mobile-unit-table > tbody > tr > :nth-child(4) > .link,
  body #app .mobile-admin-page table.mobile-color-table > tbody > tr > :nth-child(5) > .link {
    display:inline-flex; align-items:center; min-height:30px; padding:4px 8px 4px 0;
    margin-right:10px; white-space:nowrap;
  }
}
/* Mobile document lists render one page at a time. */
.mobile-list-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0;color:#52647a;font-size:12px}
.mobile-list-pagination>div{display:flex;gap:8px}
/* One shared date/month picker for phone browsers and mini-program WebViews. */
.mobile-date-backdrop{position:fixed;inset:0;z-index:12000;background:rgba(8,25,43,.45);display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain}
.mobile-date-sheet{width:100%;max-width:480px;max-height:95vh;max-height:95dvh;overflow:auto;background:#fff;border-radius:18px 18px 0 0;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 32px rgba(8,25,43,.12)}
.mobile-date-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e5ebf2}
.mobile-date-sheet button{min-height:44px;border-radius:8px;background:transparent;color:#235fb8;font:inherit;touch-action:manipulation}
.mobile-date-head button{padding:0 12px;font-weight:600}
.mobile-date-toolbar{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;margin:12px 0}
.mobile-date-toolbar select{min-width:0;width:100%;min-height:44px;padding:6px;background:#f4f7fb;border:1px solid #dde5ef;border-radius:8px;font:inherit;color:#102a43}
.mobile-date-toolbar button{font-size:26px}
.mobile-date-week,.mobile-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.mobile-date-week{color:#78869a;font-size:12px;margin-bottom:6px;line-height:28px}
.mobile-date-grid button{color:#102a43}
.mobile-date-grid button.is-selected{background:#2368d1;color:white;font-weight:700}
.mobile-date-sheet button:disabled{color:#bcc5d0;cursor:default}
.mobile-date-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #e5ebf2;margin-top:12px;padding-top:8px}
.mobile-date-selected{font-size:14px;color:#354861}
.mobile-date-sheet [hidden]{display:none!important}