/* Mobile bottom tab shell — phone only */
:root {
  --shimei-tabbar-h: 56px;
  --shimei-tabbar-bg: #ffffff;
  --shimei-tabbar-border: #e8edf3;
  --shimei-tabbar-text: #64748b;
  --shimei-tabbar-active: #0284C7;
  --shimei-tabbar-active-bg: #E0F2FE;
}

.shimei-mobile-tabbar {
  display: none;
}

@media (max-width: 768px) {
  body.shimei-has-mobile-tabbar {
    padding-bottom: calc(var(--shimei-tabbar-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .shimei-mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    height: calc(var(--shimei-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: var(--shimei-tabbar-bg);
    border-top: 1px solid var(--shimei-tabbar-border);
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  }

  .shimei-mobile-tabbar button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--shimei-tabbar-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.15;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .shimei-mobile-tabbar button .tab-ico {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
  }

  .shimei-mobile-tabbar button .tab-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shimei-mobile-tabbar button.is-active {
    color: var(--shimei-tabbar-active);
    background: var(--shimei-tabbar-active-bg);
  }

  .shimei-mobile-tabbar button.is-disabled {
    opacity: 0.45;
  }

  /* Pending segment control on sales-list */
  .shimei-pending-segments {
    display: none;
    gap: 8px;
    padding: 0;
    margin: 0 0 12px;
  }

  body.shimei-tab-pending .shimei-pending-segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .shimei-pending-segments button {
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 14px;
    min-height: 48px;
    padding: 8px 10px;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
  }

  .shimei-pending-segments button .seg-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
  }

  /* S-Contrast：白底 + 蓝色描边，避免浅蓝填充与背景糊在一起 */
  .shimei-pending-segments button.is-active {
    border: 2px solid #0284C7;
    background: #ffffff;
    color: #0369A1;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
  }

  .shimei-pending-segments button.is-active .seg-count {
    background: #0284C7;
    color: #ffffff;
  }

  /* pending 页：去掉「待处理 · 待发货」标题模块，只保留总记录轻量行 */
  body.shimei-tab-pending .page-heading {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
  }

  body.shimei-tab-pending .page-heading .topbar {
    display: none !important;
  }

  body.shimei-tab-pending .page-heading .summary {
    margin: 0 !important;
    padding: 0 2px;
    text-align: left;
  }

  body.shimei-tab-pending .filter-shell {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  /* Record-order page: hide dense nav chrome on phone */
  body.shimei-tab-create.mobile-shell-record #userActionList,
  body.shimei-tab-create.mobile-shell-record #statsSection,
  body.shimei-tab-create.mobile-shell-record #paymentStatsSection {
    display: none !important;
  }

  body.shimei-tab-create.mobile-shell-record .header h1 {
    font-size: 1.05rem;
  }
}

/* more page */
.more-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 24px;
}
.more-page h1 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}
.more-page .sub {
  margin: 0 0 16px;
  color: #64748b;
  font-size: 0.9rem;
}
.more-group {
  margin-bottom: 14px;
  border: 1px solid #e8edf3;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.more-group-title {
  padding: 10px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #eef2f7;
}
.more-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border: 0;
  border-top: 1px solid #f1f5f9;
  width: 100%;
  background: #fff;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
.more-group .more-link:first-of-type {
  border-top: 0;
}
.more-link span.meta {
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 500;
}

  .shimei-mobile-tabbar button.no-icon .tab-label.is-stacked {
    gap: 1px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.15;
    white-space: normal;
  }

  .shimei-mobile-tabbar button.no-icon .tab-label .tab-line {
    display: block;
    max-width: 100%;
  }

  .shimei-mobile-tabbar button.no-icon {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .shimei-mobile-tabbar button.no-icon .tab-label:not(.is-stacked) {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .shimei-mobile-tabbar button.no-icon .tab-label.is-stacked {
    font-size: 11px;
  }

/* ---- Mobile shell: kill horizontal page pan (录单/原首页/列表 Tab) ---- */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    max-width: 100%;
    width: 100%;
    position: relative;
  }

  body.shimei-has-mobile-tabbar {
    /* Prefer vertical pan; reduces accidental horizontal page drag */
    touch-action: pan-y;
    overflow-x: hidden !important;
  }

  body.shimei-has-mobile-tabbar #mainContainer,
  body.shimei-has-mobile-tabbar .container,
  body.shimei-has-mobile-tabbar .main-grid,
  body.shimei-has-mobile-tabbar .form-section,
  body.shimei-has-mobile-tabbar .list-section,
  body.shimei-has-mobile-tabbar .page {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /*
   * Sticky F-Card shell uses negative horizontal margin to cancel .page padding.
   * max-width:100% would lock width to content-box and leave a right gutter — do not set it.
   */
  body.shimei-has-mobile-tabbar .list-sticky-shell {
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible;
  }

  body.shimei-has-mobile-tabbar .list-sticky-frame {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  body.shimei-has-mobile-tabbar #saleForm,
  body.shimei-has-mobile-tabbar form {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  body.shimei-has-mobile-tabbar .form-group,
  body.shimei-has-mobile-tabbar .order-item-field,
  body.shimei-has-mobile-tabbar .order-item-card,
  body.shimei-has-mobile-tabbar .product-model-row,
  body.shimei-has-mobile-tabbar .header,
  body.shimei-has-mobile-tabbar .header--scheme-d,
  body.shimei-has-mobile-tabbar .header-status-tags {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  body.shimei-has-mobile-tabbar .header-status-tags {
    flex-wrap: wrap;
    overflow: hidden;
  }

  body.shimei-has-mobile-tabbar input,
  body.shimei-has-mobile-tabbar select,
  body.shimei-has-mobile-tabbar textarea,
  body.shimei-has-mobile-tabbar button {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 3-col meta grid is a common overflow source on narrow phones */
  body.shimei-has-mobile-tabbar .order-item-meta-grid {
    grid-template-columns: 1fr 1fr !important;
    min-width: 0;
  }

  body.shimei-has-mobile-tabbar .order-item-meta-grid > *,
  body.shimei-has-mobile-tabbar .order-item-media-grid > *,
  body.shimei-has-mobile-tabbar .order-item-status-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  body.shimei-has-mobile-tabbar .order-item-media-grid,
  body.shimei-has-mobile-tabbar .order-item-status-grid {
    min-width: 0;
  }

  /* Wide tables inside hidden modals can still contribute min-content in some WebKit builds */
  body.shimei-has-mobile-tabbar .subsidy69-table,
  body.shimei-has-mobile-tabbar .product-picker-overflow,
  body.shimei-has-mobile-tabbar table {
    min-width: 0 !important;
    max-width: 100%;
  }

  body.shimei-has-mobile-tabbar .modal-content,
  body.shimei-has-mobile-tabbar .product-picker-modal-content {
    max-width: 100% !important;
    box-sizing: border-box;
  }
}