/* Mobile UI v3 — purpose-built dense operational layout.
   Loaded last and scoped to phones so desktop remains unchanged. */
@media (max-width: 760px) {
  :root {
    --m3-navy:#17324d;
    --m3-blue:#2f73ad;
    --m3-bg:#f3f6f8;
    --m3-card:#fff;
    --m3-line:#d9e2e8;
    --m3-text:#172b3d;
    --m3-muted:#70818e;
    --m3-good:#25825b;
    --m3-warn:#c39322;
  }

  body, .app { background:var(--m3-bg) !important; }
  .app { padding-bottom:calc(62px + env(safe-area-inset-bottom)) !important; }
  .app main { padding:0 10px 12px !important; }
  .full-bleed, .rounds-ai-page, .motion-page { margin-left:-10px !important; margin-right:-10px !important; }

  /* Compact app chrome */
  .topbar {
    height:46px !important;
    min-height:46px !important;
    padding:0 12px !important;
    background:var(--m3-navy) !important;
  }
  .topbar h1 { font-size:15px !important; }
  .topbar-title-full { display:none !important; }
  .topbar-title-mobile { display:inline !important; font-size:15px !important; }
  .header-review-shortcut { width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; border-radius:9px !important; }

  /* React's original More is replaced by the reliable mobile-v3 button/sheet. */
  .topbar > nav > .nav-more { display:none !important; }
  .topbar > nav {
    height:calc(58px + env(safe-area-inset-bottom)) !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    padding:0 4px env(safe-area-inset-bottom) !important;
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .topbar > nav > a,
  .mobile-v3-more-button {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    background:transparent !important;
    color:#738592 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    font:inherit;
  }
  .topbar > nav > a > span,
  .mobile-v3-more-button > span {
    width:100%;
    height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:11px;
    font-size:10px !important;
    font-weight:750 !important;
  }
  .mobile-v3-more-button > span::before { content:'•••'; font-size:18px; line-height:18px; letter-spacing:1px; }
  .mobile-v3-more-button.active > span { background:#eaf3fb; color:var(--m3-blue); }

  .mobile-v3-more-backdrop {
    position:fixed;
    inset:0;
    z-index:2500;
    display:flex;
    align-items:flex-end;
    background:rgba(10,27,41,.38);
  }
  .mobile-v3-more-sheet {
    width:100%;
    max-height:78dvh;
    overflow:auto;
    padding:8px 12px calc(14px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    background:#fff;
    box-shadow:0 -14px 45px rgba(13,35,53,.22);
  }
  .mobile-v3-more-sheet header { display:flex; align-items:center; justify-content:space-between; height:44px; }
  .mobile-v3-more-sheet header strong { font-size:18px; color:var(--m3-text); }
  .mobile-v3-more-sheet header button { width:36px; height:36px; border:0; border-radius:50%; background:#edf2f5; font-size:24px; }
  .mobile-v3-more-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
  .mobile-v3-more-grid a {
    min-height:54px;
    padding:9px 11px;
    display:flex;
    align-items:center;
    border:1px solid var(--m3-line);
    border-radius:12px;
    background:#fff;
    color:var(--m3-text);
    text-decoration:none;
    font-size:13px;
    font-weight:700;
  }

  /* Headings should never consume half a screen. */
  .page-header-row, .page-heading-row {
    padding:9px 10px 4px !important;
    margin:0 !important;
    gap:7px !important;
  }
  .page-header-row h2, .page-heading-row h2 { font-size:20px !important; line-height:1.1 !important; }
  .page-header-row p, .page-heading-row p { display:none !important; }
  .page-header-actions { gap:5px !important; margin-top:5px !important; display:flex !important; flex-wrap:wrap !important; }
  .page-header-actions > button, .page-header-actions > a {
    min-height:34px !important;
    padding:6px 10px !important;
    font-size:11px !important;
    border-radius:9px !important;
    flex:0 1 auto !important;
  }

  /* Filters become one compact disclosure row. */
  .filter-bar {
    margin:5px 10px 7px !important;
    padding:5px 8px !important;
    border:1px solid var(--m3-line) !important;
    border-radius:10px !important;
    background:#fff !important;
  }
  .filter-bar summary { min-height:34px !important; font-size:11px !important; }
  .filter-bar[open] { padding-bottom:8px !important; }

  /* SITES — one operational row, not a weather card. */
  .welcome-time { margin:6px 10px !important; padding:7px 10px !important; border-radius:10px !important; }
  .welcome-time > div:first-child > span,
  .welcome-time > div:last-child span { display:none !important; }
  .welcome-time h2 { font-size:13px !important; }
  .welcome-time > div:last-child strong { font-size:12px !important; }
  .sites-page .filter-bar, .site-list-page .filter-bar { margin-bottom:5px !important; }
  .site-card {
    margin:0 10px 6px !important;
    min-height:68px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  .site-card-main { grid-template-columns:68px minmax(0,1fr) !important; min-height:68px !important; }
  .site-card-main > img, .site-card-main > .thumbnail, .site-card-main > .thumb-placeholder {
    width:68px !important; height:68px !important; min-width:68px !important;
  }
  .site-card-footer { padding:7px 9px !important; }
  .site-card-title { font-size:13px !important; }
  .site-card-photo-time { font-size:9px !important; }
  .site-card-coords { display:none !important; }
  .site-card-status-grid {
    position:absolute;
    right:8px;
    bottom:5px;
    display:flex !important;
    width:auto !important;
    border:0 !important;
    gap:5px;
    pointer-events:none;
  }
  .site-card { position:relative; }
  .site-card-weather, .site-card-presence {
    min-height:0 !important;
    padding:2px 5px !important;
    display:flex !important;
    border:0 !important;
    border-radius:7px;
    background:#f5f8fa;
  }
  .site-card-status-icon { font-size:11px !important; }
  .site-card-weather strong, .site-card-presence strong { font-size:9px !important; }
  .site-card-weather span, .site-card-weather small, .site-card-presence span, .site-card-presence small, .site-card-roster-button { display:none !important; }

  /* ROUNDS — stats are a dense strip instead of giant cards. */
  .rounds-ai-page .page-header-row { padding-bottom:6px !important; }
  .rounds-ai-top-stats, .ai-summary-grid.rounds-ai-top-stats {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:1px !important;
    margin:0 10px 8px !important;
    padding:0 !important;
    overflow:hidden;
    border:1px solid var(--m3-line);
    border-radius:11px;
    background:var(--m3-line);
  }
  .rounds-ai-top-stats .chart-card {
    min-height:62px !important;
    margin:0 !important;
    padding:7px 3px !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    text-align:center !important;
  }
  .rounds-ai-top-stats .chart-card strong { display:block; font-size:18px !important; line-height:1.05; }
  .rounds-ai-top-stats .chart-card span { display:block; margin-top:3px; font-size:8px !important; line-height:1.1 !important; font-style:normal !important; }
  .rounds-ai-top-stats .chart-card small { display:none !important; }

  .rounds-ai-page section > h2, .rounds-ai-page section > h3,
  .rounds-ai-page > h2, .rounds-ai-page > h3 { font-size:16px !important; margin:10px 10px 5px !important; }
  .rounds-ai-page section > p.muted, .rounds-ai-page > p.muted { display:none !important; }

  /* Round/AI report tables become true scan rows. */
  .rounds-run-list, .ai-run-list.mobile-card-list {
    display:block !important;
    margin:0 10px 7px !important;
    border:0 !important;
    background:transparent !important;
  }
  .rounds-run-list thead, .ai-run-list.mobile-card-list thead { display:none !important; }
  .rounds-run-list tbody, .ai-run-list.mobile-card-list tbody { display:block !important; }
  .rounds-run-list tr, .ai-run-list.mobile-card-list tr {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:2px 8px !important;
    margin-bottom:5px !important;
    padding:8px 9px !important;
    border:1px solid var(--m3-line) !important;
    border-left:3px solid var(--m3-blue) !important;
    border-radius:9px !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  .rounds-run-list td, .ai-run-list.mobile-card-list td { display:block !important; padding:0 !important; border:0 !important; min-width:0; font-size:10px !important; }
  .rounds-run-list td::before, .ai-run-list.mobile-card-list td::before { display:none !important; }
  .rounds-run-list td[data-label="Round"], .ai-run-list.mobile-card-list td:first-child { grid-column:1; grid-row:1 / span 2; }
  .rounds-run-list td[data-label="Started"], .rounds-run-list td[data-label="Finished"] { display:none !important; }
  .rounds-run-list strong, .ai-run-list.mobile-card-list strong { font-size:12px !important; line-height:1.2 !important; }
  .round-report-actions, .ai-run-list .mobile-card-actions { gap:3px !important; justify-content:flex-end !important; }
  .round-report-actions .button-link, .ai-run-list .button-link { min-height:30px !important; padding:5px 7px !important; font-size:9px !important; }

  /* CASES — compact queue rows. */
  .open-issues-page .page-header-row { padding-bottom:5px !important; }
  .open-issues-page .page-header-actions { display:grid !important; grid-template-columns:1fr auto !important; width:100%; }
  .open-issues-page .page-header-actions > * { min-height:34px !important; }
  .case-type-grid, .issue-type-grid, .case-summary-grid {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:5px !important;
    margin:5px 10px 8px !important;
  }
  .case-type-grid > *, .issue-type-grid > *, .case-summary-grid > * {
    min-height:58px !important;
    margin:0 !important;
    padding:8px 10px !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }
  .case-type-grid h3, .issue-type-grid h3, .case-summary-grid h3 { font-size:13px !important; margin:0 !important; }
  .case-type-grid p, .issue-type-grid p, .case-summary-grid p { margin:1px 0 0 !important; font-size:9px !important; line-height:1.2 !important; }
  .open-issues-page h2, .open-issues-page h3 { margin-top:10px !important; }

  /* MOTION — remove the oversized mute explainer from every event. */
  .motion-page .page-header-row { padding-bottom:4px !important; }
  .motion-grid { margin:0 10px !important; }
  .motion-card { grid-template-columns:86px minmax(0,1fr) !important; margin-bottom:5px !important; }
  .motion-card > a, .motion-card > a:first-of-type,
  .motion-card > a img, .motion-card > img, .motion-card .motion-placeholder {
    width:86px !important; height:78px !important; min-height:78px !important;
  }
  .motion-card-body { padding:6px 7px !important; }
  .motion-card-title strong { font-size:12px !important; }
  .motion-card-title span, .motion-card-body > time, .motion-trigger-rule { font-size:8.5px !important; }
  .motion-card .site-motion-mute-control, .motion-card .motion-mute-control {
    display:flex !important;
    align-items:center !important;
    gap:4px !important;
    margin:3px 0 0 !important;
    padding:3px 4px !important;
    min-height:26px !important;
    border:0 !important;
    background:#fff9e8 !important;
    border-radius:6px !important;
  }
  .motion-card .site-motion-mute-control h3, .motion-card .site-motion-mute-control h4,
  .motion-card .motion-mute-control h3, .motion-card .motion-mute-control h4 { display:none !important; }
  .motion-card .site-motion-mute-control p, .motion-card .motion-mute-control p { display:none !important; }
  .motion-card .site-motion-mute-control select, .motion-card .motion-mute-control select { min-height:24px !important; height:24px !important; padding:2px 4px !important; font-size:8px !important; }
  .motion-card .site-motion-mute-control button, .motion-card .motion-mute-control button { min-height:24px !important; padding:3px 6px !important; font-size:8px !important; }
  .motion-actions { margin-top:3px !important; padding-top:4px !important; gap:3px !important; }
  .motion-review-action > button:first-child, .motion-actions > button { min-height:30px !important; font-size:8px !important; }

  /* Settings/System Health use compact section rows. */
  .settings-page, .setup-page, .diagnostics-page { padding-bottom:8px !important; }
  .settings-resource-heading { margin:4px 0 6px !important; }
  .settings-resource-heading h3 { font-size:16px !important; }
  .settings-resource-heading p { display:none !important; }
  .diagnostics-category { margin:0 0 5px !important; border-radius:9px !important; }
  .diagnostics-category > summary { min-height:42px !important; padding:7px 9px !important; font-size:12px !important; }
  .diagnostics-category[open] > *:not(summary) { padding-left:8px !important; padding-right:8px !important; }

  /* Kill desktop-style giant whitespace and typography that leaks into mobile. */
  .chart-card { box-shadow:none !important; }
  .muted { line-height:1.25 !important; }
  footer { display:none !important; }
}

@media (max-width: 390px) {
  .rounds-ai-top-stats .chart-card span { font-size:7px !important; }
  .rounds-ai-top-stats .chart-card strong { font-size:16px !important; }
  .mobile-v3-more-grid { grid-template-columns:1fr; }
}