/*
 * 手机工作模式：仅在 700px 以下启用。
 * 业务接口、权限和电脑端样式保持原状；这里仅调整触达方式与信息层级。
 */
.mobile-bottom-nav,
.mobile-nav-scrim,
.mobile-order-cards,
.mobile-reminder-summary {
  display: none;
}

@media (max-width: 700px) {
  body.mobile-work-mode {
    background: #f3f7fb;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body.mobile-work-mode .topbar {
    position: sticky;
    top: 0;
    z-index: 110;
    min-height: 56px;
    padding: 0 12px;
  }

  body.mobile-work-mode .topbar .brand span,
  body.mobile-work-mode .topbar .user-chip {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.mobile-work-mode:not(.detail-page) .app,
  body.mobile-work-mode:not(.detail-page) .workspace:not(.hidden) {
    display: block !important;
    min-width: 0;
    width: 100%;
  }

  body.mobile-work-mode:not(.detail-page) .workspace {
    padding: 0;
  }

  body.mobile-work-mode:not(.detail-page) .content {
    width: 100%;
    min-width: 0;
    padding: 12px 12px calc(94px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  /* Desktop's narrow, single-character rail becomes an explicit full-screen menu. */
  body.mobile-work-mode:not(.detail-page) .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 260;
    display: block !important;
    width: min(328px, calc(100vw - 42px)) !important;
    min-width: 0 !important;
    min-height: 100dvh;
    max-height: 100dvh;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 0 18px 18px 0;
    transform: translateX(-110%);
    transition: transform 180ms ease;
    box-shadow: none;
  }

  body.mobile-work-mode.mobile-nav-open:not(.detail-page) .sidebar {
    transform: translateX(0);
    box-shadow: 14px 0 36px rgba(24, 54, 83, .24);
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-group h2,
  body.mobile-work-mode:not(.detail-page) .sidebar .nav-copy,
  body.mobile-work-mode:not(.detail-page) .sidebar .nav-label {
    display: block !important;
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-button {
    display: flex;
    width: 100%;
    min-height: 46px;
    margin: 4px 0;
    padding: 0 12px;
    gap: 11px;
    border-radius: 12px;
    text-align: left;
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-button.hidden {
    display: none !important;
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-icon {
    width: 24px;
    min-width: 24px;
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-copy {
    min-width: 0;
    flex: 1;
  }

  body.mobile-work-mode:not(.detail-page) .sidebar .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .mobile-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: none;
    background: rgba(15, 34, 52, .42);
  }

  body.mobile-work-mode.mobile-nav-open .mobile-nav-scrim {
    display: block;
  }

  /* The list remains complete in the DOM, while phone users get readable cards. */
  body.mobile-work-mode #orderView .legacy-table-wrap {
    display: none;
  }

  body.mobile-work-mode .detail-panel {
    display: none;
  }

  .mobile-order-cards {
    display: grid;
    gap: 10px;
    margin-top: 12px;
  }

  .mobile-order-card {
    display: block;
    padding: 14px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid #d8e3ee;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(38, 75, 110, .07);
  }

  .mobile-order-card:active {
    transform: scale(.992);
    background: #f7fbff;
  }

  .mobile-order-card.is-locked {
    background: #f6f8fa;
  }

  .mobile-order-card-head,
  .mobile-order-card-route,
  .mobile-order-card-meta,
  .mobile-order-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
  }

  .mobile-order-card-head strong {
    min-width: 0;
    color: #134b79;
    font-size: 16px;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
  }

  .mobile-order-card-head .mobile-order-status {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e7f1fb;
    color: #245f90;
    font-size: 11px;
  }

  .mobile-order-card .mobile-order-party {
    margin-top: 8px;
    color: #263f56;
    font-size: 13px;
    line-height: 1.45;
  }

  .mobile-order-card .mobile-order-party small,
  .mobile-order-card-meta small {
    margin-right: 5px;
    color: #7d91a5;
    font-size: 11px;
  }

  .mobile-order-card-route {
    margin-top: 10px;
    color: #285d89;
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-order-card-route span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-order-card-meta {
    align-items: flex-start;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #edf1f5;
    color: #526b82;
    font-size: 12px;
  }

  .mobile-order-card-meta > span {
    min-width: 0;
  }

  .mobile-order-card-foot {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
    color: #5a6d80;
    font-size: 12px;
  }

  .mobile-order-card-event {
    width: 100%;
    padding: 7px 9px;
    border-radius: 8px;
    background: #fff6e7;
    color: #8b5a17;
    line-height: 1.4;
  }

  .mobile-order-card-event.is-alert {
    background: #fff0ef;
    color: #a23b35;
  }

  .mobile-order-empty {
    padding: 28px 14px;
    color: #7890a5;
    text-align: center;
    background: #fff;
    border: 1px dashed #c9d8e5;
    border-radius: 14px;
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 210;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 6px 5px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid #dbe6ef;
    box-shadow: 0 -5px 18px rgba(24, 55, 82, .08);
    backdrop-filter: blur(12px);
  }

  .mobile-bottom-nav button {
    display: grid;
    min-width: 0;
    gap: 2px;
    place-items: center;
    padding: 3px 1px;
    color: #668097;
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
    background: transparent;
    border: 0;
  }

  .mobile-bottom-nav button > b {
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
  }

  .mobile-bottom-nav button.is-active {
    color: #1767a9;
  }

  .mobile-bottom-nav button.is-active > b {
    display: grid;
    width: 30px;
    height: 24px;
    place-items: center;
    color: #fff;
    background: #2e77b2;
    border-radius: 999px;
  }

  /* Reminder queues may not cover the working screen on a phone. */
  body.mobile-work-mode .order-time-reminder-toast {
    display: none !important;
  }

  body.mobile-work-mode.mobile-reminder-open .order-time-reminder-toast.business-due-reminder:not(.hidden) {
    display: block !important;
  }

  .mobile-reminder-summary {
    position: fixed;
    left: 12px;
    right: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 205;
    display: none;
    max-width: calc(100vw - 92px);
    padding: 9px 12px;
    color: #7a4a00;
    font: inherit;
    font-size: 12px;
    text-align: left;
    background: #fff9eb;
    border: 1px solid #f0d6a0;
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(107, 79, 25, .14);
  }

  .mobile-reminder-summary.is-visible {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .mobile-reminder-summary b {
    color: #af6900;
    font-size: 13px;
  }

  /* The desktop task launcher is 62x88 even when collapsed and can cover the
     rightmost table action.  On a phone the icon and badge are sufficient;
     keep the same task-centre action in one compact 48px tap target. */
  body.mobile-work-mode .customer-task-launcher {
    top: auto !important;
    right: 0;
    bottom: calc(70px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px !important;
    padding: 4px 2px 4px 5px;
    display: block;
    border-radius: 26px 0 0 26px;
  }

  body.mobile-work-mode .customer-task-launcher button.customer-task-quick-open {
    width: 100%;
    height: 100%;
    padding: 0;
    justify-content: center;
  }

  body.mobile-work-mode .customer-task-launcher button.customer-task-quick-open > small,
  body.mobile-work-mode .customer-task-launcher .customer-task-launcher-toggle {
    display: none;
  }

  /* Desktop flex-basis becomes vertical height after the HBL search form turns
     into a column.  Reset it so the keyword field stays one normal row. */
  body.mobile-work-mode .hbl-make-search .hbl-make-keyword {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Base-data toolbars are a frequent mobile maintenance entry.  Every
     control remains reachable without being clipped behind the viewport. */
  body.mobile-work-mode .base-list-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  body.mobile-work-mode .base-list-tools .base-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  body.mobile-work-mode #baseDataView .base-list-tools .base-search-form > :is(select, input, button) {
    width: 100%;
    min-width: 0;
  }

  body.mobile-work-mode .base-list-tools .base-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }

  body.mobile-work-mode .base-list-tools .base-toolbar-actions > * {
    width: 100%;
    min-width: 0;
  }

  /* List headers must stack before their search form claims the full phone
     width.  Without this, the count and create buttons sit beyond Safari's
     right edge even though the list itself is responsive. */
  body.mobile-work-mode .module-list-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }

  body.mobile-work-mode .module-list-tools .module-search-form {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  body.mobile-work-mode .module-list-tools .module-search-form > :is(select, input, button) {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }

  body.mobile-work-mode .module-list-tools .module-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  body.mobile-work-mode .module-list-tools .module-toolbar-actions .mini-button {
    flex: 1 1 140px;
    min-width: 0;
  }

  /* Mail audit mixes a flexible keyword field with three selects and two
     native date controls.  Safari otherwise shrinks the dates to icon-sized
     boxes.  Keep the same filters and values, but give every control a stable
     phone tap area. */
  body.mobile-work-mode .mail-audit-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
  }

  body.mobile-work-mode .mail-audit-toolbar .mail-audit-search,
  body.mobile-work-mode .mail-audit-toolbar #mailAuditOrderNo {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  body.mobile-work-mode .mail-audit-toolbar :is(select, input[type="date"], button) {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* The desktop task centre is intentionally three columns.  Horizontal
     panning between an inbox, order context and reply form makes phone taps
     appear unresponsive, so retain all three surfaces in document order and
     let the drawer itself scroll vertically. */
  body.mobile-work-mode .employee-customer-task-drawer .customer-task-workbench-layout,
  body.mobile-work-mode .employee-customer-task-drawer.company-task-source .customer-task-workbench-layout,
  body.mobile-work-mode .employee-customer-task-drawer.internal-inquiry-source .customer-task-workbench-layout {
    height: calc(100dvh - 188px);
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-work-mode .employee-customer-task-drawer .customer-task-inbox {
    max-height: 44dvh;
    border-right: 0;
    border-bottom: 1px solid #c8d2dc;
  }

  body.mobile-work-mode .employee-customer-task-drawer .customer-task-context-panel {
    min-height: 240px;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid #c8d2dc;
    overflow: visible;
  }

  body.mobile-work-mode .employee-customer-task-drawer .customer-task-detail {
    min-height: 68dvh;
    display: block;
  }

  /* Safari cannot be resized below its desktop minimum during verification,
     while mobile-work-mode begins at 700px.  Apply the client editor's true
     single-column contract across that whole phone range. */
  body.mobile-work-mode .client-edit-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
  }

  body.mobile-work-mode .client-edit-form :is(.client-form-grid, .client-contact-grid, .client-profile-grid, .client-route-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Detail screens retain their operations, but never rely on clipped columns. */
  body.mobile-work-mode.detail-page .detail-page-shell {
    width: 100%;
    padding: 10px 10px calc(18px + env(safe-area-inset-bottom));
  }

  body.mobile-work-mode.detail-page .detail-page-card,
  body.mobile-work-mode.detail-page .detail-page-header,
  body.mobile-work-mode.detail-page .detail-page-layout {
    min-width: 0;
    max-width: 100%;
  }

  body.mobile-work-mode.detail-page .detail-page-header,
  body.mobile-work-mode.detail-page .detail-page-actions,
  body.mobile-work-mode.detail-page .detail-tab-bar {
    flex-wrap: wrap;
  }

  body.mobile-work-mode.detail-page .detail-tab-bar,
  body.mobile-work-mode.detail-page .detail-actions,
  body.mobile-work-mode.detail-page .timeline-actions {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-work-mode.detail-page .detail-page-layout,
  body.mobile-work-mode.detail-page .detail-summary-grid,
  body.mobile-work-mode.detail-page .detail-content-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-work-mode .edit-backdrop,
  body.mobile-work-mode .mail-confirm-modal,
  body.mobile-work-mode .company-task-reminder-modal {
    z-index: 320;
  }
}