/* Mobile UI v12 — site-card breathing room, richer onsite detail, and cleaner Settings coordinates. */
@media (max-width: 760px) {
  /* Settings > Sites: coordinates belong to the secondary metadata stack, not a split table row. */
  .setup-site-list tr {
    min-height: 72px !important;
  }

  .setup-site-list td[data-label="Latitude"],
  .setup-site-list td[data-label="Longitude"] {
    display: none !important;
  }

  .setup-site-list .site-coordinate-mobile {
    display: block !important;
    margin-top: 2px !important;
    color: #8a9aa4 !important;
    font: 600 8.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
  }

  /* Sites overview: give operational cards enough room for timestamp, weather, and presence details. */
  .site-card-main {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    min-height: 98px !important;
  }

  .site-card-main > img,
  .site-card-main > .thumbnail,
  .site-card-main > .thumb-placeholder {
    width: 98px !important;
    height: 98px !important;
    min-width: 98px !important;
  }

  .site-card-footer {
    min-height: 98px !important;
    padding: 10px 11px !important;
    gap: 4px !important;
    justify-content: center !important;
  }

  .site-card-title {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .site-card-photo-time,
  .site-card-coords {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .site-card-status-grid {
    grid-template-columns: minmax(0, 42%) minmax(0, 58%) !important;
    align-items: stretch !important;
    pointer-events: auto !important;
  }

  .site-card-weather,
  .site-card-presence {
    min-height: 70px !important;
    padding: 8px 9px !important;
    align-items: flex-start !important;
  }

  .site-card-weather > div,
  .site-card-presence > div {
    min-width: 0 !important;
  }

  .site-card-weather strong,
  .site-card-presence strong {
    display: block !important;
    margin-bottom: 1px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .site-card-weather span,
  .site-card-weather small,
  .site-card-presence small {
    display: block !important;
    font-size: 8.75px !important;
    line-height: 1.25 !important;
  }

  .site-card-presence div > span {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    color: #526773 !important;
    font-size: 9px !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .site-card-roster-button {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    margin-top: 3px !important;
    padding: 2px 0 !important;
    font-size: 8.75px !important;
    font-weight: 750 !important;
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
  }

  /* Edit Site: reserve room for the switch so the camera-site description wraps naturally. */
  .site-edit-section-type .feature-toggle-row {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .site-edit-section-type .feature-toggle-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 62px) !important;
  }

  .site-edit-section-type .feature-toggle-text > span {
    display: block !important;
    max-width: 24ch !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  .site-edit-section-type .feature-toggle-switch {
    flex: 0 0 auto !important;
    margin-top: 2px !important;
  }

  /* Mobile More menu: keep sign-out obvious and separate from navigation. */
  .mobile-v3-more-grid .mobile-v3-signout {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    padding: 9px 11px !important;
    border: 1px solid #edc7c7 !important;
    border-radius: 12px !important;
    background: #fff7f7 !important;
    color: #a93232 !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-align: left !important;
  }
}