/*
  Mobile high-density override.  Some Android browsers request the desktop
  viewport, so this intentionally targets .force-mobile in addition to a
  physical max-width media query.  It is loaded after styles.css to avoid
  stale CSS caches and to keep the desktop layout unchanged.
*/
@media (max-width: 780px) {
  .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

html.force-mobile .summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 7px !important;
}

html.force-mobile .summary-card {
  min-height: 54px !important;
  padding: 6px 5px !important;
  border-top-width: 2px !important;
}

html.force-mobile .summary-card small {
  min-height: 21px;
  overflow-wrap: anywhere;
  white-space: normal;
  font-size: 10px !important;
  line-height: 1.05;
}

html.force-mobile .summary-card strong {
  margin-top: 1px !important;
  overflow: hidden;
  font-size: 15px !important;
  line-height: 1.04 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ninth metric (库存) occupies the first cell; search fills the same row
   instead of producing a lonely fourth row. */
html.force-mobile .summary-search-card {
  grid-column: span 3 !important;
  min-height: 54px !important;
  padding: 5px !important;
}

html.force-mobile .summary-search-form {
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  margin-left: 0;
}

html.force-mobile .summary-search-form input[type="search"] {
  width: auto !important;
  height: 32px !important;
  min-width: 0;
  flex: 1 1 0;
  padding: 0 8px !important;
  font-size: 12px !important;
}

html.force-mobile .summary-search-form .detail-search-clear { right: 50px; }

html.force-mobile .summary-search-form .detail-team-search-button {
  width: auto !important;
  min-width: 43px;
  height: 32px !important;
  padding: 0 7px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

html.force-mobile .content { gap: 7px; }
html.force-mobile .data-panel .section-title { padding: 8px 10px; }
html.force-mobile .section-title h3 { font-size: 16px; }
html.force-mobile .section-title span { font-size: 11px; }

html.force-mobile .data-table-wrap {
  max-height: calc(100vh - 195px) !important;
}

html.force-mobile .data-table {
  min-width: 430px !important;
  table-layout: fixed;
}

html.force-mobile .data-table th:first-child,
html.force-mobile .data-table td:first-child { width: 84px !important; }

html.force-mobile .data-table th:not(:first-child),
html.force-mobile .data-table td:not(:first-child) { width: 50px !important; }

html.force-mobile .data-table th {
  min-height: 38px;
  padding: 6px 3px !important;
  overflow-wrap: anywhere;
  white-space: normal !important;
  word-break: break-all;
  font-size: 11px !important;
  line-height: 1.08;
}

html.force-mobile .data-table td {
  padding: 6px 3px !important;
  font-size: 12px !important;
}

html.force-mobile .data-table .name-cell {
  min-width: 84px !important;
  padding: 6px 5px !important;
}

html.force-mobile .data-table .name-cell strong {
  font-size: 12px !important;
  line-height: 1.12;
}

html.force-mobile .data-table .name-cell small {
  margin-top: 1px !important;
  font-size: 9px !important;
  line-height: 1.05;
}

html.force-mobile .data-table .visit-cell { font-size: 13px !important; }