/* CancerManager v2.0.2 — MOBILE-ONLY presentation fixes.
   Load after mobile-h5.css. Existing PC layout and app logic unchanged. */
@media screen and (max-width: 767px) {
  /* Original responsive rules stack the heading and actions into a tall,
     sticky two-row bar, which obscures chart/table content while scrolling. */
  .topbar,
  body.focus-mode .topbar {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: auto !important;
    min-height: 58px !important;
    margin: 0 -12px 12px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    backdrop-filter: none !important;
  }
  .topbar-leading {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 8px !important;
  }
  .topbar .mobile-nav-btn {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
  }
  .topbar .page-heading { flex: 1 1 auto; min-width: 0; }
  .topbar #pageTitle {
    font-size: 18px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar .page-context,
  .topbar #pageSubtitle,
  .topbar .family-sync-meta,
  .topbar .family-search-trigger { display: none !important; }
  .topbar .family-top-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: none !important;
  }
  .topbar #familyUploadBtn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .topbar #familySystemBtn {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  /* Existing fixed system popover still appears above document content. */
  .family-system-menu { z-index: 225 !important; }

  /* On desktop each record is two side-by-side label/value pairs.  A phone
     leaves each value ~1 Chinese-character wide: force ONE full-width pair. */
  .view .kv-grid,
  #patientDetail .kv-grid,
  #pathologyList .kv-grid,
  #pathologyDetails .kv-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .view .kv {
    display: grid !important;
    grid-template-columns: minmax(0, 92px) minmax(0, 1fr) !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 0 !important;
    align-items: start !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .view .kv > .k {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    color: #667085;
  }
  .view .kv > .v {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
  }
  .view .record,
  .view .record-title,
  .view .record-title > * { min-width: 0 !important; }
  .view .record-title {
    display: flex;
    gap: 6px 10px !important;
    flex-wrap: wrap !important;
  }
  .view .record-title h3 {
    flex: 1 1 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .view .record-date {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .view .panel,
  .view .record { max-width: 100%; overflow-wrap: break-word; }

  /* A 1200px trend SVG must be swiped, not shrink to illegible 4px ticks.
     Communicate the gesture and keep the legend/notes inside the phone width. */
  #view-trends .trend-chart-wrap {
    max-width: 100% !important;
    overscroll-behavior-x: contain;
  }
  #view-trends .trend-chart-wrap::before {
    content: '曲线可左右滑动，查看完整日期 →';
    display: block;
    position: sticky;
    left: 0;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 5px 8px;
    border-radius: 6px;
    background: #f0f6ff;
    color: #476584;
    font-size: 11px;
    line-height: 1.5;
  }
  #view-trends .trend-chart-wrap > svg {
    display: block;
    min-width: 680px !important;
    width: 680px !important;
    max-width: none !important;
    height: auto !important;
  }
  #view-trends .trend-legend,
  #view-trends .trend-chart-note {
    position: sticky;
    left: 0;
    display: flex;
    flex-wrap: wrap !important;
    align-items: flex-start;
    max-width: calc(100vw - 60px) !important;
    width: max-content !important;
    margin-right: 0;
    line-height: 1.5;
  }
  #view-trends .trend-legend-item { max-width: 100%; overflow-wrap: anywhere; }

  /* Navigating among long records should never trap the user beneath the bar. */
  .mobile-bottom-nav { box-sizing: border-box; }
  .main { scroll-padding-top: 12px; }
}

@media screen and (max-width: 355px) {
  .topbar #pageTitle { font-size: 16px !important; }
  .topbar #familyUploadBtn { padding: 6px 7px !important; font-size: 11px !important; }
  .topbar-leading { gap: 5px !important; }
  .topbar .family-top-actions { gap: 3px !important; }
  .view .kv { grid-template-columns: minmax(0, 78px) minmax(0, 1fr) !important; gap: 8px !important; }
}