/* Mobile layout only. Business calculations and desktop column settings stay unchanged. */
@media (max-width: 1023px) {
  body { margin: 0; max-width: 100%; }
  .dashboard, .dashboard * { box-sizing: border-box; }
  .dashboard { width: 100%; min-width: 0; min-height: 100vh; flex-direction: column; }
  .dashboard > .sidebar {
    position: sticky; top: 0; z-index: 40; width: 100%; height: auto;
    padding: 8px; gap: 5px; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid #eaeaf2;
    background: #fff; scrollbar-width: thin; overscroll-behavior-x: contain;
  }
  .dashboard > .sidebar .workspace, .dashboard > .sidebar .nav-group { display: none; }
  .dashboard > .sidebar .nav-item {
    flex: 0 0 auto; min-height: 44px; padding: 10px 12px; font-size: 13px;
    white-space: nowrap; border-radius: 8px;
  }
  .dashboard > .sidebar .nav-item .ic { width: 18px; height: 18px; }
  .dashboard > .main { width: 100%; max-width: 100%; min-width: 0; padding: 16px 12px 30px; gap: 16px; }
  .main > *, .main [id^="view"], .main [id^="view"] > * { min-width: 0; max-width: 100%; }
  .main .topbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .main .page-title h1 { font-size: 22px; letter-spacing: 0; line-height: 1.4; }
  .main .page-title .status { overflow-wrap: anywhere; }
  .main .top-right { width: 100%; justify-content: flex-start; gap: 8px; }
  .main .role-switch { flex: 1 1 190px; min-width: 0; padding: 8px; }
  .main .role-switch select { min-width: 0; max-width: 100%; }
  .main .data-banner { align-items: flex-start; flex-direction: column; gap: 5px; }
  .main .data-banner strong { white-space: normal; }
  .main .data-banner span { overflow-wrap: anywhere; }
  .main button, body > main button, #logisticsApp button { min-height: 44px; touch-action: manipulation; }
  .main input:not([type="checkbox"]):not([type="radio"]), .main select, .main textarea,
  body > main input, body > main select, body > main textarea, body > .card input,
  #logisticsApp input, #logisticsApp select, #logisticsApp textarea {
    box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px !important;
  }
  .main input[type="checkbox"], .main input[type="radio"] { flex: none; }
  .main .cards, .main .ov-kpis, .main .lr-kpis, .main .aa-kpis, .main .iv-kpis,
  .main .dh-kpis, .main .fr-kpis, .main .sc-expiry-kpis, .main .dr-kpi,
  body #logisticsApp .lg-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px;
  }
  .main .card, .main .ov-kpi, .main .iv-kpi, .main .lr-kpi, .main .aa-kpi,
  .main .dh-kpis > button, .main .fr-kpis > div { padding: 14px 12px; min-width: 0; }
  .main #viewDailyReport .dr-kpi .k { padding: 14px 12px; min-height: 110px; }
  .main #viewDailyReport .dr-kpi .kv, .main .card .v,
  .main .ov-kpi b, .main .iv-kpi b { font-size: 22px; white-space: normal; overflow-wrap: anywhere; }
  .main .ov-grid, .main .lr-grid, .main .tm-grid, .main .sc-platforms { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .main .pm-form, .main .tm-fields, .main .sc-fields, .main .fr-fields,
  body #logisticsApp .lg-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .main .ov-filter, .main .lr-filter, .main .aa-filter, .main .iv-filter,
  .main .dh-filters, .main .fr-filter, .main .dr-query, .main .wb-toolbar,
  body #logisticsApp .lg-filter {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end; gap: 12px; padding: 14px 12px;
  }
  .main .ov-filter > *, .main .lr-filter > *, .main .aa-filter > *, .main .iv-filter > *,
  .main .dh-filters > *, .main .fr-filter > *, .main .dr-query > *, .main .wb-toolbar > *,
  body #logisticsApp .lg-filter > * { min-width: 0; max-width: 100%; margin: 0; }
  .main .ov-filter label, .main .lr-filter label, .main .aa-filter label, .main .iv-filter label,
  .main .dh-filters label, .main .fr-filter label, .main .dr-query label, .main .wb-toolbar label,
  body #logisticsApp .lg-filter label { width: 100%; min-width: 0; }
  .main .ov-filter input, .main .ov-filter select, .main .lr-filter input, .main .lr-filter select,
  .main .aa-filter input, .main .aa-filter select, .main .iv-filter input, .main .iv-filter select,
  .main .dh-filters input, .main .dh-filters select, .main .fr-filter input, .main .fr-filter select,
  .main .dr-query input, .main .dr-query select, .main .wb-toolbar input, .main .wb-toolbar select,
  body #logisticsApp .lg-filter input, body #logisticsApp .lg-filter select { width: 100%; min-width: 0 !important; max-width: 100%; }
  .main .ov-quick, .main #drQueryStatus { grid-column: 1 / -1; text-align: left; }
  .main .ov-quick { flex-wrap: wrap; }
  .main .pm-section, .main .pm-workspace, .main .ov-card, .main .iv-card,
  .main .dh-card, .main .fr-card, .main .tm-card, .main .sc-card,
  body #logisticsApp .lg-card { padding: 14px 12px; }
  .main .pm-workspace-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .main .pm-workspace-head > div, .main .pm-workspace-head label { width: 100%; min-width: 0; }
  .main .pm-workspace-head #pmShop, .main .pm-workspace-head .pm-workspace-search input { width: 100%; min-width: 0; max-width: 100%; }
  .main .pm-shop-cards { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding-bottom: 6px; }
  .main .pm-shop-cards button { flex: 0 0 auto; max-width: 100%; }
  .main .pm-actions { gap: 8px; }
  .main .pm-actions button { flex: 1 1 140px; }
  .main .pm-bulk { flex-wrap: wrap; white-space: normal; }
  .main .pm-notice, .main #pmStatus, .main #erpStorageStatus { overflow-wrap: anywhere; }
  .main .pm-table-wrap, .main .prod-table-wrap, .main .wb-table-wrap, .main .iv-scroll,
  .main .ov-scroll, .main .lr-scroll, .main .aa-scroll, .main .tm-scroll, .main .sc-scroll,
  .main #pmPreviewRows, body #logisticsApp .lg-scroll, body #logisticsApp .lg-group-body {
    min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  }
  .main .pm-table-wrap::before, .main .prod-table-wrap::before, .main .iv-scroll::before,
  body > main .scroll::before, body #logisticsApp .lg-scroll::before {
    content: '左右滑动查看完整表格'; display: block; position: sticky; left: 0;
    width: fit-content; max-width: 100%; padding: 8px 10px; color: #9587a5; font-size: 11px;
  }
  .main #bossOverview .ov-table { min-width: 640px; }
  .main #adAnalysis .aa-store-table, .main #adAnalysis .aa-product-table { min-width: 850px !important; }
  .main #liveOrders .lr-scroll table, body > main .scroll table { min-width: 640px; }
  /* Desktop's multiple frozen identity columns otherwise cover most of a phone screen. */
  .main #viewDailyReport table tbody td, .main #warehouseInventory table tbody td { position: static !important; left: auto !important; }
  .main #viewDailyReport table thead th, .main #warehouseInventory table thead th { left: auto !important; }
  body #logisticsApp { max-width: 100%; min-width: 0; }
  body #logisticsApp .lg-sku-group > summary { grid-template-columns: 12px minmax(0, 1fr) 70px; padding: 12px 8px !important; gap: 8px; }
  body #logisticsApp .lg-group-overview { grid-column: 2 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  body #logisticsApp .lg-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body #logisticsApp .lg-preview-product, body #logisticsApp .lg-summary-metric { overflow-wrap: anywhere; }
  body #logisticsApp .lg-row { align-items: stretch; }
  .main .rt-card-head, .main .aa-diagnostic-head, .main .sec-head { flex-wrap: wrap; gap: 10px; }
  .main .aa-diagnostic-filters { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); }
  .main #viewHealth .dh-card { overflow-x: auto; }
  .main #viewHealth .dh-card:has(table)::before { content: '左右滑动查看原因和处理入口'; display: block; position: sticky; left: 0; width: fit-content; padding: 0 0 10px; color: #7c6d88; font-size: 12px; }
  .main #viewHealth table { min-width: 760px; }
  .main #viewHealth th, .main #viewHealth td { font-size: 12px; line-height: 1.7; }
  .main .dh-note, .main .pm-help, .main .ov-muted { font-size: 12px; color: #7c6d88; }
  .main .rs-label { white-space: nowrap; flex-shrink: 0; }
  .main #frAuto, .main .fr-card { max-width: 100%; overflow-x: auto; }
  .main #frAuto table { min-width: 780px; }
  .main #dailyColumnSettings > div, .main #wbColumnOptions { max-width: min(90vw, 340px); }
  /* Employee workspace and the standalone logistics page use the same mobile sizing. */
  body > header { box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 12px; }
  body > header > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  body > main { box-sizing: border-box; width: 100%; min-width: 0; padding: 16px 12px; }
  body > main nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  body > main nav button { flex: 0 0 auto; white-space: nowrap; }
  body > main .card { box-sizing: border-box; min-width: 0; max-width: 100%; padding: 14px 12px; }
  body > main .filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body > main .filter label, body > main .filter input, body > main .filter select { min-width: 0; width: 100%; }
  body > main .scroll { max-width: 100%; overflow: auto; }
  body > .card { padding: 24px; }
}
@media (max-width: 479px) {
  .main .pm-form, .main .tm-fields, .main .sc-fields, .main .fr-fields,
  body #logisticsApp .lg-fields { grid-template-columns: minmax(0, 1fr) !important; }
  .main .pm-form > div, body #logisticsApp .lg-fields > div { grid-column: 1 / -1; }
  .main #bossOverview .ov-filter label { min-width: 0; }
}
@media (max-width:1023px){
 .main #viewDailyReport .dr-kpi,.main #viewDailyReport .dr-kpi:has(.dr-summary-profit){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
 .main #viewDailyReport .dr-summary-card{padding:15px 14px;min-height:180px}
 .main #viewDailyReport .dr-summary-profit{grid-column:1/-1;min-height:0}
 .main #viewDailyReport .dr-summary-metric dd{font-size:23px}
 .main #viewDailyReport .dr-summary-split{gap:10px}
 .main #viewDailyReport .dr-summary-split dd{font-size:17px}
 .main #viewDailyReport .dr-summary-value{font-size:22px}
 .main #viewDailyReport .dr-summary-reference-body dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (max-width:480px){
 .main #viewDailyReport .dr-summary-card{padding:14px 12px}
 .main #viewDailyReport .dr-summary-split{grid-template-columns:1fr;margin-top:14px;gap:12px}
 .main #viewDailyReport .dr-summary-metric dd{font-size:22px}
 .main #viewDailyReport .dr-summary-value{font-size:20px}
 .main #viewDailyReport .dr-summary-profit-pair{gap:12px}
 .main #viewDailyReport .dr-summary-reference small{display:block;margin-left:0}
}

@media(max-width:600px){
 .main #viewDailyReport .dr-kpi:has(.dr-summary-margin){grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
 .main #viewDailyReport .dr-summary-card{padding:13px 11px;min-height:152px}
 .main #viewDailyReport .dr-summary-card h3{font-size:12px;margin-bottom:12px}
 .main #viewDailyReport .dr-summary-card h3 span{font-size:9px}
 .main #viewDailyReport .dr-summary-pair{grid-template-columns:1fr;gap:9px}
 .main #viewDailyReport .dr-summary-pair .dr-summary-metric dd{font-size:16px}
 .main #viewDailyReport .dr-summary-qty{grid-template-columns:1fr 1fr;margin-top:9px;padding-top:8px;gap:7px}
 .main #viewDailyReport .dr-summary-qty .dr-summary-metric dd{font-size:14px}
 .main #viewDailyReport .dr-summary-margin .dr-summary-metric dd{font-size:21px}
 .main #viewDailyReport .dr-summary-foot{font-size:9px;line-height:1.5;margin-top:9px}
}