/* Mobile UI v2 regression hardening.
   Loaded after feature-specific overrides so fixes here win without changing desktop. */
@media (max-width: 760px) {
  html, body, #root, .app { max-width:100%; overflow-x:clip; }
  .app main, .full-bleed { min-width:0; max-width:100%; }

  /* Bottom navigation must work for every permission set, including users without Rounds. */
  .topbar > nav {
    grid-template-columns:repeat(auto-fit,minmax(68px,1fr)) !important;
  }
  .topbar > nav > a[href="/sites"] > span::before {
    content:'⌂' !important;
    font-size:20px;
    line-height:19px;
    font-weight:500;
  }
  .topbar > nav > a[href="/rounds"] > span::before {
    content:'✓' !important;
    font-size:19px;
    line-height:19px;
    font-weight:700;
  }
  .topbar > nav > a[href="/cases"] > span::before {
    content:'◆' !important;
    font-size:16px;
    line-height:19px;
    font-weight:500;
  }
  /* Undo positional icons so role/capability changes cannot put the wrong icon on Cases. */
  .topbar > nav > a:nth-of-type(2):not([href="/rounds"]) > span::before,
  .topbar > nav > a:nth-of-type(3):not([href="/cases"]) > span::before { content:none !important; }

  .topbar > nav > a > span,
  .topbar > nav > .nav-more > summary { min-height:56px !important; }
  .nav-more > div a { min-height:42px; display:flex !important; align-items:center; }

  /* SettingsModal's real DOM is backdrop > section.settings-modal. Make it a true bottom sheet. */
  .settings-modal-backdrop {
    place-items:end center !important;
    padding:0 !important;
    overscroll-behavior:contain;
  }
  .settings-modal.ui-edit-modal {
    width:100% !important;
    max-width:none !important;
    max-height:92dvh !important;
    margin:0 !important;
    border-radius:18px 18px 0 0 !important;
  }
  .settings-modal.ui-edit-modal.settings-modal-fullscreen {
    width:100% !important;
    max-height:calc(100dvh - 8px) !important;
    border-radius:14px 14px 0 0 !important;
  }
  .settings-modal > header {
    min-height:48px;
    flex:0 0 auto;
  }
  .settings-modal .ui-modal-close { min-width:40px !important; min-height:40px !important; }
  .settings-modal-body,
  .ui-modal-body {
    min-height:0;
    overscroll-behavior:contain;
    scroll-padding-bottom:76px;
  }

  /* Compact does not mean hard to tap. Keep secondary controls comfortably touchable. */
  .mobile-card-actions button,
  .setup-site-list .mobile-card-actions button,
  .site-edit-cameras .site-modal-camera-list article button,
  .motion-review-action > button:first-child,
  .motion-actions > button,
  .camera-maintenance-actions button,
  .camera-maintenance-actions .button-link,
  .assignment-row button {
    min-height:36px !important;
  }
  .filter-bar summary,
  .diagnostics-category > summary,
  .site-edit-collapsible > summary { min-height:44px !important; }

  /* Sticky controls sit below the 50px app header and don't fight bottom actions. */
  .motion-page .filter-bar,
  .system-settings-mobile-tabs { top:50px !important; }
  .modal-actions,
  .ui-modal-actions { z-index:6; }

  /* Prevent chip/picker content and long technical values from forcing horizontal scroll. */
  .assignment-selected-chips,
  .assignment-picker,
  .group-assignment-section,
  .settings-user-table,
  .camera-maintenance-result,
  .round-editor-form { min-width:0; max-width:100%; }
  .assignment-selected-chips button span:first-child,
  .assignment-row > span,
  .camera-maintenance-title strong,
  .camera-maintenance-title h4 { overflow-wrap:anywhere; }

  /* Safe-area consistency for devices with a home indicator. */
  .app { padding-bottom:calc(66px + env(safe-area-inset-bottom)) !important; }
  .topbar > nav { padding-bottom:env(safe-area-inset-bottom) !important; }
}