/* Mobile UI v7 selector corrections against the live React component markup. */
@media (max-width: 760px) {
  /* PageHeader uses ui-* class names. */
  .ui-page-header { padding: 7px 9px 6px !important; gap: 5px !important; }
  .ui-page-header-row { gap: 6px !important; }
  .ui-page-header-row h2 { margin: 0 !important; font-size: 23px !important; line-height: 1.08 !important; letter-spacing: -.025em !important; }
  .ui-page-header-row p.muted { margin: 2px 0 0 !important; font-size: 11px !important; line-height: 1.3 !important; }
  .ui-page-actions button { min-height: 34px !important; padding: 5px 8px !important; font-size: 10px !important; }

  /* Motion mute uses .site-motion-mute; make it a compact secondary control. */
  .motion-card:not(.reviewed) .site-motion-mute {
    margin: 5px 0 0 !important;
    padding: 5px 7px !important;
    gap: 5px !important;
    border-width: 1px !important;
    border-left-width: 3px !important;
    border-radius: 8px !important;
    background: #fffdf6 !important;
  }
  .motion-card:not(.reviewed) .site-motion-mute > div:first-child strong {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  .motion-card:not(.reviewed) .site-motion-mute > div:first-child span { display: none !important; }
  .motion-card:not(.reviewed) .site-motion-mute-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
  }
  .motion-card:not(.reviewed) .site-motion-mute-actions select {
    min-height: 29px !important;
    height: 29px !important;
    padding: 3px 5px !important;
    font-size: 9px !important;
  }
  .motion-card:not(.reviewed) .site-motion-mute-actions button {
    min-height: 29px !important;
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  /* Diagnostics camera results are DeviceStatusTile links. */
  .diagnostics-category-body .device-grid,
  .diagnostics-category-body .device-tiles,
  .diagnostics-category-body .camera-grid { gap: 5px !important; }
  .diagnostics-category-body .device-tile {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    grid-template-areas:
      'head badges'
      'stats stats'
      'meta foot' !important;
    gap: 3px 7px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
  }
  .device-tile-header { grid-area: head !important; min-width: 0 !important; }
  .device-tile-header strong { font-size: 12px !important; line-height: 1.15 !important; }
  .device-tile-header .muted { font-size: 9px !important; }
  .device-tile-badges { grid-area: badges !important; gap: 3px !important; align-self: start !important; }
  .device-tile-badges span { font-size: 8px !important; padding: 2px 5px !important; }
  .device-tile-stats { grid-area: stats !important; display: flex !important; flex-wrap: wrap !important; gap: 2px 8px !important; }
  .device-tile-stats span { font-size: 9px !important; }
  .device-tile-meta { grid-area: meta !important; display: flex !important; gap: 6px !important; min-width: 0 !important; }
  .device-tile-meta span { font-size: 8.5px !important; color: #7a8790 !important; }
  .device-tile-footer { grid-area: foot !important; justify-self: end !important; margin: 0 !important; font-size: 8px !important; white-space: nowrap !important; }

  /* Team Maps PageHeader is also ui-* markup. */
  .group-maps-page .ui-page-header { padding-bottom: 5px !important; }
  .group-maps-page .ui-page-header-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
  }
  .group-maps-page .ui-page-header-row p.muted { display: none !important; }
  .group-maps-page .ui-page-actions button {
    min-width: 36px !important;
    width: 36px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .group-maps-page .ui-page-actions button::before { content: '↻'; font-size: 19px !important; }

  /* Map roster FilterBar actual structure: keep result text but avoid a giant clear row. */
  .map-roster-tabs + .filter-bar { padding: 6px !important; gap: 5px !important; }
  .map-roster-tabs + .filter-bar .filter-bar-fields {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(110px,.72fr) !important;
    gap: 5px !important;
  }
  .map-roster-tabs + .filter-bar .filter-bar-fields label { margin: 0 !important; }
  .map-roster-tabs + .filter-bar .filter-bar-fields input,
  .map-roster-tabs + .filter-bar .filter-bar-fields select { min-height: 34px !important; height: 34px !important; font-size: 10px !important; }
  .map-roster-tabs + .filter-bar .filter-bar-footer { min-height: 26px !important; margin-top: 3px !important; }
  .map-roster-tabs + .filter-bar .filter-bar-footer button { min-height: 26px !important; padding: 3px 7px !important; font-size: 9px !important; }
  .map-roster-tabs + .filter-bar .filter-result-text { font-size: 9px !important; }
}