/* Operations Command Center — mobile UI v2 real-device refinement
   Final phone-only polish after iPhone review. Loaded last. */
@media (max-width:760px) {
  :root {
    --occ-mobile-nav:#082b49;
    --occ-mobile-nav-active:#0d6fb8;
  }

  /* Dark operations-app navigation: closer to the approved visual concept. */
  .app { padding-bottom:calc(64px + env(safe-area-inset-bottom)) !important; }
  .topbar > nav {
    height:calc(60px + env(safe-area-inset-bottom)) !important;
    padding:0 5px env(safe-area-inset-bottom) !important;
    background:var(--occ-mobile-nav) !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 -5px 18px rgba(8,43,73,.18) !important;
  }
  .topbar > nav > a,
  .topbar > nav > .nav-more { color:rgba(255,255,255,.72) !important; }
  .topbar > nav > a > span,
  .topbar > nav > .nav-more > summary {
    min-height:58px !important;
    padding:6px 3px 4px !important;
    border-radius:9px !important;
  }
  .topbar > nav > a.active { color:#fff !important; }
  .topbar > nav > a.active > span {
    background:var(--occ-mobile-nav-active) !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .topbar > nav > a[href="/sites"] > span::before { content:'⌂' !important; }
  .topbar > nav > a[href="/rounds"] > span::before { content:'▣' !important; font-size:17px !important; }
  .topbar > nav > a[href="/cases"] > span::before { content:'◇' !important; font-size:19px !important; }
  .nav-more > summary::before { color:currentColor; }
  .nav-attention-badge {
    background:#f6c744 !important;
    color:#17324d !important;
    border:2px solid var(--occ-mobile-nav) !important;
    font-weight:800 !important;
  }
  .nav-more > div { bottom:calc(60px + env(safe-area-inset-bottom)) !important; }

  /* More information above the fold. */
  .page-header-row,
  .page-heading-row { margin-bottom:7px !important; padding-top:7px !important; }
  .page-header-row h2,
  .page-heading-row h2 { font-size:20px !important; }
  .page-header-row p,
  .page-heading-row p { font-size:11px !important; }
  .settings-page > .page-header-row p,
  .settings-page > .page-heading-row p { display:none !important; }

  /* List/card rhythm: operational rows, not marketing cards. */
  .site-card,
  .settings-user-card,
  .settings-map-card,
  .settings-group-card,
  .ai-case-card,
  .manual-case-card { box-shadow:none !important; }
  .settings-user-card,
  .settings-map-card,
  .settings-group-card { margin-bottom:6px !important; padding:8px 9px !important; border-radius:10px !important; }

  /* Health detail: turn large KPI tiles into a dense dashboard. */
  .diagnostics-category[open] > div { padding:8px !important; }
  .diagnostics-category h3,
  .diagnostics-category h4 { margin-top:8px !important; margin-bottom:6px !important; }
  .diagnostics-category .diagnostics-grid,
  .diagnostics-category .diagnostics-summary-grid,
  .diagnostics-category .health-stat-grid,
  .diagnostics-category .camera-health-grid {
    gap:6px !important;
  }
  .diagnostics-category .stat-card,
  .diagnostics-category .diagnostic-stat,
  .diagnostics-category .metric-card,
  .diagnostics-category .health-stat {
    min-height:74px !important;
    padding:8px 9px !important;
    border-radius:9px !important;
  }
  .diagnostics-category .stat-card strong,
  .diagnostics-category .diagnostic-stat strong,
  .diagnostics-category .metric-card strong,
  .diagnostics-category .health-stat strong { font-size:21px !important; line-height:1 !important; }

  /* Long health inventories should read like compact rows. */
  .camera-health-row,
  .diagnostics-camera-row,
  .motion-inventory-row {
    padding:8px 9px !important;
    min-height:62px !important;
    border-radius:8px !important;
  }

  /* Editors: selected relationships are the primary representation. Available items are secondary. */
  .assignment-selected-chips { padding:8px !important; gap:5px !important; }
  .assignment-selected-chips button { min-height:32px !important; padding:4px 8px !important; }
  .assignment-row { min-height:48px !important; padding:6px 8px !important; border-radius:8px !important; }
  .assignment-row button { min-height:34px !important; }
  .settings-modal fieldset { margin:7px 0 !important; padding:8px !important; }
  .settings-modal legend { font-size:13px !important; }
  .settings-modal textarea { min-height:72px !important; }

  /* Team Connect recipient cards: one scan row with channel controls at right. */
  .team-connect-recipient,
  .team-connect-member-card {
    min-height:64px !important;
    padding:9px 10px !important;
    border-radius:9px !important;
  }
  .team-connect-recipient h4,
  .team-connect-member-card h4 { margin:0 !important; font-size:14px !important; }
  .team-connect-recipient p,
  .team-connect-member-card p { margin:1px 0 0 !important; font-size:11px !important; }

  /* Round/AI report cards: reduce repeated vertical labels and whitespace. */
  .ai-analysis-card,
  .round-report-card,
  .inspection-run-card {
    padding:9px 10px !important;
    margin-bottom:6px !important;
    border-radius:10px !important;
  }
  .ai-analysis-card h3,
  .round-report-card h3,
  .inspection-run-card h3 { font-size:14px !important; line-height:1.2 !important; margin-bottom:2px !important; }
  .ai-analysis-card p,
  .round-report-card p,
  .inspection-run-card p { margin:2px 0 !important; font-size:11px !important; line-height:1.25 !important; }

  /* Cases: keep the important condition visible without oversized cards. */
  .ai-case-card,
  .case-card {
    padding:10px !important;
    margin-bottom:7px !important;
    border-radius:10px !important;
  }
  .ai-case-card h3,
  .case-card h3 { font-size:16px !important; line-height:1.22 !important; margin:5px 0 !important; }
  .ai-case-card .operator-comment,
  .case-card .operator-comment { padding:8px !important; font-size:12px !important; line-height:1.3 !important; }
  .ai-case-card button,
  .case-card button { min-height:36px !important; }

  /* Photo stream: smaller media cards and graceful failed-image treatment. */
  .photo-stream-grid { gap:8px !important; }
  .photo-card { margin-bottom:8px !important; border-radius:10px !important; overflow:hidden; }
  .photo-card img { max-height:220px !important; object-fit:cover !important; background:#e9eef2; }
  .photo-card-footer { padding:7px 9px !important; }
  .photo-card-footer strong { font-size:13px !important; }
  .photo-card-footer small { font-size:10px !important; }

  /* Site detail: retain the useful glance row while reducing the mute block. */
  .site-detail-motion-mute,
  .site-motion-mute { padding:9px 10px !important; margin:7px 10px !important; }
  .site-detail-motion-mute h3,
  .site-motion-mute h3 { font-size:15px !important; margin:0 0 2px !important; }
  .site-detail-motion-mute p,
  .site-motion-mute p { font-size:11px !important; line-height:1.3 !important; margin:0 0 7px !important; }

  /* Very narrow phones: preserve labels and avoid clipped right-side controls. */
  @media (max-width:390px) {
    .topbar > nav > a,
    .topbar > nav > .nav-more { font-size:10px !important; }
    .settings-resource-heading { flex-wrap:wrap; }
    .settings-resource-heading .primary-action { margin-left:auto; }
  }
}