/* Patient & Family v2.0.1: mobile H5 enhancement. Load AFTER family-v2.css. */
html { -webkit-text-size-adjust:100%; }
html, body, .app-shell, .main { max-width:100%; }
.view, .view > *, .panel, .panel > *, .workspace-panel, .filter-grid, .table-wrap { min-width:0; }
/* The original desktop menu was clipped by the sidebar's overflow:hidden and
   the navigation's overflow:auto. The script portals this menu to body. */
body > .family-more-menu { position:fixed!important; bottom:auto; right:auto; left:12px; top:80px; width:min(326px, calc(100vw - 24px)); max-height:calc(100dvh - 28px); overflow-y:auto; overscroll-behavior:contain; z-index:210!important; }
body > .family-more-menu button, body > .family-more-menu a { min-height:45px; }
.mobile-bottom-nav,.mobile-more-backdrop { display:none; }
.lab-mobile-browser { display:none; }
.lab-mobile-filter-toggle { display:none; }
.interface-settings-actions { display:flex;gap:8px;flex-wrap:wrap; }

@media (max-width:767px) {
  :root { --mobile-bottom-height:66px; }
  html, body { width:100%; max-width:100%; overflow-x:clip; }
  body { font-size:14px; }
  .app-shell { display:block; min-width:0; }
  .main, body.sidebar-collapsed .main, body.focus-mode .main {
    width:100%!important; max-width:100%!important; margin-left:0!important;
    padding:0 12px calc(var(--mobile-bottom-height) + 28px + env(safe-area-inset-bottom, 0px))!important;
  }
  .main > .view, .main > #loading, .main > #errorBox { width:100%; max-width:100%; min-width:0; }
  .topbar, body.focus-mode .topbar {
    min-height:64px!important; margin:0 -12px 12px!important;
    padding:9px 12px!important; gap:8px!important;
  }
  .topbar-leading, .page-heading { min-width:0; }
  .topbar h1 { font-size:19px!important; line-height:1.3; }
  .topbar p { display:none; }
  .page-context { font-size:10px; }
  .family-top-actions { flex:0 0 auto; gap:6px!important; }
  .family-upload-btn { min-height:36px!important; padding:7px 9px!important; font-size:12px!important; white-space:nowrap; }
  .family-system-btn { height:36px!important; width:36px!important; }
  .sidebar { z-index:195!important; height:100dvh; max-height:100dvh; overflow-y:auto!important; overscroll-behavior:contain; }
  .sidebar-backdrop { z-index:190!important; }
  .family-nav { overflow:visible!important; }
  .sidebar-footer { padding-bottom:15px; }
  .context-subnav { position:static!important; width:100%; margin:0 0 12px!important; }
  .context-subnav-inner { width:100%; max-width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .context-subnav-label { flex:0 0 auto; }
  .context-subnav-item { flex:0 0 auto; }
  .panel { width:100%; max-width:100%; padding:14px!important; margin-bottom:12px!important; }
  .panel-head { flex-wrap:wrap; gap:8px!important; }
  .panel-head > * { min-width:0; max-width:100%; }
  .panel-head .button { white-space:normal; }
  .patient-hero, .family-start-card, .family-treatment-card { max-width:100%; }
  .patient-hero-top, .family-start-card, .family-home-columns,
  .family-trend-simple, .family-analysis-grid, .dashboard-editor-grid,
  .home-dashboard-grid, .family-metric-grid, .followup-grid,
  .followup-snapshot-grid, .imaging-compare-grid, .imaging-diff-grid,
  .quality-section-grid, .stage-grid { grid-template-columns:minmax(0,1fr)!important; }
  .summary-grid, .home-kpi-grid, .quality-kpi-grid, .dictionary-kpi-grid,
  .course-kpi-grid, .followup-kpi-grid, .trend-stats-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .trend-stats-grid > *, .summary-grid > *, .quality-kpi-grid > * { min-width:0; overflow-wrap:anywhere; }
  .family-start-actions { grid-template-columns:minmax(0,1fr)!important; }
  .filter-grid, .lab-filter-grid, .document-filter-grid, .trend-toolbar,
  .cycle-compare-toolbar, .imaging-toolbar, .imaging-compare-toolbar,
  .dictionary-toolbar, .course-toolbar, .stage-observe-toolbar {
    grid-template-columns:minmax(0,1fr)!important;
  }
  .filter-grid > *, .trend-toolbar > *, .family-trend-simple > *,
  .cycle-compare-toolbar > *, .imaging-toolbar > *, .upload-form > * { min-width:0!important; width:100%; }
  input.input, select.input, textarea.input, .smart-picker-trigger { max-width:100%; min-width:0; }
  input[type="date"] { width:100%; min-width:0; }
  .workspace-tabs, .trend-preset-row { display:flex; width:100%; max-width:100%; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .workspace-tab, .trend-preset-row > * { flex:0 0 auto; }
  .workspace-tabs { position:static; }
  #trendChart, #trendTable, #labList, #documentList, #cycleCompareTable,
  #qualityAbnormalList { width:100%; max-width:100%; min-width:0; }
  .table-wrap,.stage-observe-table-wrap,.followup-calendar-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-wrap table { width:max-content; min-width:100%; }
  /* Dense trend charts retain their readable labels and scroll within the chart,
     never expanding the entire page. */
  .trend-chart-wrap { width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .trend-chart-wrap > svg { min-width:680px; }
  .trend-legend,.trend-chart-note { min-width:0; max-width:100%; flex-wrap:wrap; overflow-wrap:anywhere; }
  .smart-picker-root, .smart-picker-popover { max-width:100%; }
  .smart-picker-popover { position:fixed!important; left:12px!important; right:12px!important; top:72px!important; bottom:calc(var(--mobile-bottom-height) + 12px + env(safe-area-inset-bottom, 0px))!important; width:auto!important; min-width:0!important; max-height:none!important; z-index:220!important; }
  .smart-picker-list { max-height:calc(100dvh - 230px)!important; overflow-y:auto; }
  .product-dialog-card,.command-palette-card,.clinical-drawer { max-width:100vw; }
  .modal, .modal-card { max-width:calc(100vw - 20px); }
  .report-timeline-row { grid-template-columns:75px minmax(0,1fr)!important; }
  .report-timeline-row > :nth-child(3) { grid-column:2; }
  .followup-calendar-grid { min-width:700px; }
  .followup-day { min-height:80px; }
  .back-to-top { bottom:calc(var(--mobile-bottom-height) + 18px + env(safe-area-inset-bottom, 0px))!important; }
  .mobile-bottom-nav {
    position:fixed; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    left:0; right:0; bottom:0; min-height:var(--mobile-bottom-height);
    padding:4px max(8px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px));
    background:#fff; border-top:1px solid #e5eaf2; box-shadow:0 -4px 20px rgba(20,32,56,.07);
    z-index:230; gap:3px;
  }
  .mobile-bottom-item { border:0; background:transparent; color:#69778b; cursor:pointer;
    min-width:0; min-height:56px; border-radius:10px; display:flex; flex-direction:column;
    justify-content:center; align-items:center; gap:1px; padding:3px; }
  .mobile-bottom-item > span { font-size:23px; font-weight:700; line-height:1.1; }
  .mobile-bottom-item > small { font-size:11px; font-weight:650; }
  .mobile-bottom-item.active { color:#285fc7; background:#edf4ff; }
  .mobile-bottom-item:focus-visible { outline:2px solid #285fc7; outline-offset:-2px; }
  .mobile-more-backdrop { display:none; position:fixed; inset:0; z-index:200; background:rgba(15,23,42,.38); }
  body.mobile-more-open .mobile-more-backdrop { display:block; }
  body > .family-more-menu { position:fixed!important; display:block; left:12px!important; right:12px!important;
    width:auto!important; top:auto!important; bottom:calc(var(--mobile-bottom-height) + 10px + env(safe-area-inset-bottom, 0px))!important;
    max-height:calc(100dvh - var(--mobile-bottom-height) - 30px - env(safe-area-inset-bottom, 0px));
    overflow-y:auto; z-index:220!important; border-radius:16px; padding:10px; }
  body > .family-more-menu.hidden { display:none!important; }
  body > .family-more-menu button { min-height:46px; }
}
@media (max-width:355px) {
  .topbar { gap:4px!important; }
  .topbar h1 { font-size:17px!important; }
  .family-upload-btn { font-size:11px!important; padding-inline:6px!important; }
  .summary-grid, .trend-stats-grid { grid-template-columns:minmax(0,1fr)!important; }
}

/* Mobile lab workflow: report list first, then a compact list of every item in
   the selected report. The desktop table remains unchanged above 767px. */
@media (max-width:767px) {
  #labList .lab-desktop-results { display:none!important; }
  #labList .lab-mobile-browser { display:block;width:100%;max-width:100%;min-width:0; }
  #view-labs .lab-mobile-filter-toggle { display:flex;width:100%;align-items:center;justify-content:space-between;margin:0 0 10px;padding:10px 12px;border:1px solid #dfe6ef;border-radius:10px;background:#f8fafc;color:#36516d;font-size:13px;font-weight:700;text-align:left; }
  #view-labs .lab-mobile-filter-toggle::after { content:'＋';font-size:16px;font-weight:500; }
  #view-labs .lab-mobile-filter-toggle[aria-expanded="true"]::after { content:'－'; }
  #view-labs .lab-filter-grid { display:none!important; }
  #view-labs .lab-filter-grid.mobile-open { display:grid!important;margin-bottom:12px; }
  .lab-mobile-intro,.lab-group-explanation { margin:0 0 10px;padding:9px 10px;border-radius:9px;background:#f5f8fc;color:#56657a;font-size:12px;line-height:1.55;overflow-wrap:anywhere; }
  .lab-report-list { display:grid;gap:8px; }
  .lab-report-entry { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;width:100%;min-width:0;margin:0;padding:11px 12px;text-align:left;color:#26364d;background:#fff;border:1px solid #dfe6ef;border-radius:11px;box-shadow:none; }
  .lab-report-entry:active { background:#f5f8fc; }
  .lab-report-date { grid-column:1;font-size:12px;color:#64748b;white-space:nowrap; }
  .lab-report-date small { font-size:inherit; }
  .lab-report-title { grid-column:1;font-size:15px;font-weight:760;line-height:1.4;overflow-wrap:anywhere; }
  .lab-report-meta { grid-column:2;grid-row:1/3;align-self:center;text-align:right;font-size:11px;color:#64748b;white-space:nowrap; }
  .lab-report-meta strong { color:#b42318; }
  .lab-report-source { grid-column:1/-1;font-size:11px;color:#8a96a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .lab-report-detail-head { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 10px;align-items:center;margin-bottom:10px; }
  .lab-report-back { grid-column:1/-1;width:max-content;max-width:100%;padding:5px 0;border:0;background:transparent;color:#245fbd;font-size:13px;text-align:left; }
  .lab-report-detail-head > div { min-width:0; }
  .lab-report-detail-head strong { display:block;font-size:16px;line-height:1.4;overflow-wrap:anywhere; }
  .lab-report-detail-head span { display:block;margin-top:3px;color:#64748b;font-size:12px; }
  .lab-report-detail-head > a { white-space:nowrap; }
  .lab-item-list { border:1px solid #dfe6ef;border-radius:11px;overflow:hidden;background:#fff; }
  .lab-item-row { display:grid;grid-template-columns:minmax(0,1fr) minmax(72px,auto) minmax(0,34px);gap:6px 9px;align-items:center;width:100%;min-width:0;padding:9px 10px;border:0;border-bottom:1px solid #edf0f4;background:#fff;color:#26364d;text-align:left; }
  .lab-item-row:last-child { border-bottom:0; }
  .lab-item-row:active { background:#f6f9fc; }
  .lab-item-row.abnormal { background:#fffaf9; }
  .lab-item-name { min-width:0;font-size:13px;font-weight:650;line-height:1.35;overflow-wrap:anywhere; }
  .lab-item-name small { display:block;margin-top:2px;color:#8a96a8;font-size:10px;font-weight:500; }
  .lab-item-result { min-width:0;color:#15253b;font-size:15px;font-weight:780;text-align:right;overflow-wrap:anywhere; }
  .lab-item-result small { display:block;color:#64748b;font-size:10px;font-weight:500; }
  .lab-item-flag { min-width:0;color:#b42318;font-size:11px;font-weight:760;text-align:right;overflow-wrap:anywhere; }
  body.drawer-open .mobile-bottom-nav { visibility:hidden; }
  .clinical-drawer { max-height:calc(100dvh - env(safe-area-inset-top,0px) - 10px)!important;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;overflow-y:auto!important;overscroll-behavior:contain; }
  .clinical-drawer.hidden { display:none!important;transform:none!important; }
  .interface-settings-actions { display:grid;grid-template-columns:minmax(0,1fr); }
}