/*
 * 手机端布局安全层。
 * 所有规则都限制在 700px 以下；员工电脑端的现有布局、尺寸和交互保持不变。
 */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  .app,
  .workspace,
  .content,
  .detail-page-shell,
  .employee-detail-workspace,
  .employee-detail-panel,
  .base-data-layout,
  .freight-layout {
    min-width: 0;
    max-width: 100%;
  }

  /* The table itself keeps its business columns.  Its own rail—not the whole
     page—becomes horizontally scrollable, so columns can never be clipped. */
  .legacy-table-wrap,
  .table-wrap,
  .content-table-wrap,
  .hbl-make-table-wrap,
  .business-statistics-table-wrap,
  .system-management-table-wrap,
  .rating-table-shell,
  .mail-audit-table-shell,
  .factory-fee-ledger-table,
  .supplier-fee-ledger-table,
  .related-table-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .legacy-table-wrap.factory-fee-list-table-wrap {
    overflow-x: auto;
  }

  /* Secondary navigation stays one line high and gains deliberate horizontal
     scrolling instead of allowing buttons to escape the page edge. */
  .module-workbench-tabs,
  .factory-collection-tabs,
  .cp-tabs,
  .client-crm-tabs,
  .system-management-tabs,
  .rating-tabs,
  .ship-schedule-port-filters,
  .customer-task-source-tabs,
  .customer-task-filter-bar {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    flex-wrap: nowrap;
  }

  .module-workbench-tabs > button,
  .factory-collection-tabs > button,
  .cp-tabs > button,
  .client-crm-tabs > button,
  .system-management-tabs > button,
  .rating-tabs > button,
  .ship-schedule-port-filters > button,
  .customer-task-source-tabs > button,
  .customer-task-filter-bar > button {
    flex: 0 0 auto;
  }

  /* Every operational dialog remains within the visible phone viewport. */
  .edit-backdrop,
  .client-performance-modal,
  .rating-modal-backdrop,
  .employee-notice-inbox-modal,
  .company-task-reminder-modal {
    align-items: start;
    padding: 8px;
    overflow-y: auto;
  }

  .edit-dialog,
  .related-dialog,
  .freight-history-dialog,
  .freight-rule-dialog,
  .client-performance-dialog,
  .rating-modal-dialog,
  .rating-leave-editor,
  .employee-notice-inbox-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    min-height: 0;
    border-radius: 12px;
  }

  .edit-dialog > .track-head,
  .client-performance-head {
    min-height: 0;
    padding: 14px 16px;
  }

  .edit-dialog > .track-head h3,
  .client-performance-title h2 {
    font-size: 19px;
  }

  .freight-rule-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .client-performance-head {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .client-performance-tools {
    width: 100%;
    align-items: stretch;
    flex-wrap: wrap;
  }

  .edit-dialog > footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .edit-dialog > footer > button {
    min-width: 0;
    flex: 1 1 120px;
  }

  .client-performance-periods {
    width: 100%;
  }

  .client-performance-periods button {
    min-width: 0;
  }

  .related-body,
  .freight-history-body {
    min-height: 0;
    padding: 10px;
  }

  .related-summary-item {
    width: 100%;
    min-width: 0;
  }

  /* A phone must never zoom the page merely because an operational field is
     focused.  These are presentation-only rules: date values, validation,
     permissions and submission handlers remain entirely in the existing
     component code. */
  body.mobile-work-mode .edit-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
  body.mobile-work-mode .booking-order-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    max-width: 100%;
    font-size: 16px;
    scroll-margin-block: 18px;
    touch-action: manipulation;
  }

  body.mobile-work-mode .edit-dialog :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select),
  body.mobile-work-mode .booking-order-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) {
    min-height: 44px;
  }

  body.mobile-work-mode .edit-dialog textarea,
  body.mobile-work-mode .booking-order-card textarea {
    min-height: 96px;
    line-height: 1.5;
  }

  /* Order entry is the first thing an operator needs in the field.  Keep the
     header and actions stable while the form itself scrolls as one surface. */
  body.mobile-work-mode .order-entry-modal {
    align-items: stretch;
    justify-content: stretch;
    padding: 8px;
  }

  body.mobile-work-mode .order-entry-dialog {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  body.mobile-work-mode .order-entry-body {
    padding: 12px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-work-mode .order-entry-section {
    margin-bottom: 12px;
    padding: 12px;
  }

  body.mobile-work-mode .order-entry-grid,
  body.mobile-work-mode .order-period-panel,
  body.mobile-work-mode .order-period-common,
  body.mobile-work-mode .order-period-route-row,
  body.mobile-work-mode .order-period-ship-row,
  body.mobile-work-mode .order-factory-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mobile-work-mode .order-period-panel > *,
  body.mobile-work-mode .order-period-panel > .order-entry-date-pair,
  body.mobile-work-mode .order-period-panel > .order-transport-block {
    grid-column: 1 / -1;
  }

  body.mobile-work-mode .order-entry-date-pair {
    grid-template-columns: minmax(0, 1fr) minmax(108px, .72fr);
    max-width: none;
  }

  body.mobile-work-mode .order-entry-date-pair > span,
  body.mobile-work-mode .order-entry-unknown {
    grid-column: 1 / -1;
  }

  body.mobile-work-mode .order-entry-unknown {
    min-height: 34px;
    padding-bottom: 0;
  }

  /* Booking, dispatch and document steps share this modal shell.  On a phone
     the card fills the visual viewport, retains a reachable close area, and
     scrolls only its form instead of the page behind it. */
  body.mobile-work-mode .booking-order-modal {
    place-items: stretch;
    padding: 8px;
  }

  body.mobile-work-mode .booking-order-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 12px;
  }

  body.mobile-work-mode .booking-order-head,
  body.mobile-work-mode .booking-order-form {
    padding-right: 14px;
    padding-left: 14px;
  }

  body.mobile-work-mode .booking-order-head strong {
    font-size: 19px;
  }

  body.mobile-work-mode .booking-order-form {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-work-mode .booking-brand,
  body.mobile-work-mode .booking-grid.two {
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
  }

  /* The order-list actions and counters are used on every workday.  Unlike a
     data table, they should be immediately tappable instead of living on a
     horizontal rail. */
  #orderView .module-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    padding: 0;
  }

  #orderView .module-toolbar-actions .mini-button {
    width: 100%;
    min-width: 0;
  }

  #orderView .switches {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 7px 10px;
    overflow: visible;
    padding: 8px 10px;
  }

  #orderView .order-count-tools {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 6px 10px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .module-workbench-tabs > button,
  .factory-collection-tabs > button,
  .cp-tabs > button,
  .client-crm-tabs > button,
  .system-management-tabs > button,
  .rating-tabs > button {
    min-width: 132px;
  }

  .related-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hide mobile business chrome only while the existing login state is active.
   No authentication handlers or desktop presentation are changed. */
@media (max-width: 700px), (max-width: 1000px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  html body.login-active {
    padding-bottom: 0;
  }

  body.login-active :is(.mobile-bottom-nav, .mobile-nav-scrim, .mobile-reminder-summary, .customer-task-launcher, #customerTaskQuickOpen, #orderTopbarTools) {
    display: none !important;
  }

  body.login-active .app {
    padding: 20px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  body.login-active #loginPanel {
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    grid-template-columns: minmax(0, 1fr);
  }

  body.login-active .login-box {
    width: 100%;
    min-width: 0;
    max-width: 460px;
  }

  body.login-active .login-box :is(label, input, button) {
    min-width: 0;
    max-width: 100%;
  }

  body.login-active .login-box input {
    width: 100%;
    font-size: 16px;
    scroll-margin-block: 20px;
  }

  body.login-active #loginMessage {
    overflow-wrap: anywhere;
  }
}