/* Mobile UI v21 — unify Settings resource cards with Spokes and repair Motion actions. */
@media (max-width: 760px) {
  /* Settings resource tables: use the Spokes card language everywhere. */
  .setup-site-list,
  .settings-user-table,
  .settings-group-table,
  .settings-map-table,
  .setup-spoke-list {
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .setup-site-list thead,
  .settings-user-table thead,
  .settings-group-table thead,
  .settings-map-table thead,
  .setup-spoke-list thead {
    display: none !important;
  }

  .setup-site-list tbody,
  .settings-user-table tbody,
  .settings-group-table tbody,
  .settings-map-table tbody,
  .setup-spoke-list tbody {
    display: block !important;
    width: 100% !important;
  }

  .setup-site-list tr,
  .settings-user-table tr,
  .settings-group-table tr,
  .settings-map-table tr,
  .setup-spoke-list tr {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 102px !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    min-height: 96px !important;
    margin: 0 0 7px !important;
    padding: 11px 11px !important;
    border: 1px solid var(--occ-mobile-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: var(--occ-mobile-shadow) !important;
    overflow: hidden !important;
  }

  .setup-site-list td,
  .settings-user-table td,
  .settings-group-table td,
  .settings-map-table td,
  .setup-spoke-list td {
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .setup-site-list td::before,
  .settings-user-table td::before,
  .settings-group-table td::before,
  .settings-map-table td::before,
  .setup-spoke-list td::before {
    display: none !important;
    content: none !important;
  }

  .setup-site-list .mobile-card-actions,
  .settings-user-table .mobile-card-actions,
  .settings-group-table .mobile-card-actions,
  .settings-map-table .mobile-card-actions,
  .setup-spoke-list .mobile-card-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 102px !important;
  }

  .setup-site-list .mobile-card-actions button,
  .settings-user-table .mobile-card-actions button,
  .settings-group-table .mobile-card-actions button,
  .settings-map-table .mobile-card-actions button,
  .setup-spoke-list .mobile-card-actions button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 31px !important;
    height: 31px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Sites */
  .setup-site-list td[data-label="Site"] { grid-column: 1; grid-row: 1; }
  .setup-site-list td[data-label="Site"] .table-name-button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--occ-mobile-text) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }
  .setup-site-list td[data-label="Unit / Index"] { grid-column: 1; grid-row: 2; font-size: 10px !important; color: var(--occ-mobile-muted); }
  .setup-site-list td[data-label="Spoke"] { grid-column: 1; grid-row: 3; font-size: 10px !important; color: #526773; }
  .setup-site-list td[data-label="Spoke"] > span:first-child { display: block !important; margin-bottom: 2px; }
  .setup-site-list .site-coordinate-mobile { display: block !important; font-size: 9.5px !important; color: var(--occ-mobile-muted) !important; }
  .setup-site-list td[data-label="Camera site"] { grid-column: 2; grid-row: 1; justify-self: end; }
  .setup-site-list .site-type-badge { font-size: 8.5px !important; padding: 3px 6px !important; }
  .setup-site-list td[data-label="Latitude"],
  .setup-site-list td[data-label="Longitude"] { display: none !important; }
  .setup-site-list td[data-label="Actions"] { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; }

  /* Users */
  .settings-user-table td[data-label="User"] { grid-column: 1; grid-row: 1; }
  .settings-user-table td[data-label="User"] strong { font-size: 14px !important; line-height: 1.15 !important; }
  .settings-user-table td[data-label="Contact"] { grid-column: 1; grid-row: 2; }
  .settings-user-table td[data-label="Contact"] span { display: block !important; font-size: 10px !important; color: var(--occ-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Contact"] small { display: block !important; margin-top: 1px; font-size: 9px !important; color: var(--occ-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Capabilities"] { grid-column: 1; grid-row: 3; font-size: 9.5px !important; color: #526773; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Account setup"] { grid-column: 1; grid-row: 4; display: flex !important; align-items: baseline !important; gap: 5px !important; }
  .settings-user-table td[data-label="Account setup"] strong { font-size: 9px !important; }
  .settings-user-table td[data-label="Account setup"] small { font-size: 8.5px !important; color: var(--occ-mobile-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .settings-user-table td[data-label="Role"] { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; font-size: 8.5px !important; font-weight: 800 !important; text-transform: uppercase; color: var(--occ-mobile-muted); }
  .settings-user-table td[data-label="Status"] { grid-column: 2; grid-row: 2; justify-self: end; }
  .settings-user-table .user-status-badge { font-size: 8px !important; padding: 3px 6px !important; }
  .settings-user-table td[data-label="Last login"] { display: none !important; }
  .settings-user-table td[data-label="Actions"] { grid-column: 2; grid-row: 3 / span 2; align-self: end; justify-self: end; }

  /* Groups */
  .settings-group-table td[data-label="Group"] { grid-column: 1; grid-row: 1 / span 2; }
  .settings-group-table td[data-label="Group"] strong { font-size: 14px !important; line-height: 1.15 !important; }
  .settings-group-table td[data-label="Group"] .muted { display: block !important; margin-top: 3px; font-size: 9.5px !important; line-height: 1.2 !important; color: var(--occ-mobile-muted); }
  .settings-group-table td[data-label="Users"],
  .settings-group-table td[data-label="Sites"],
  .settings-group-table td[data-label="Maps"] { grid-row: 3; font-size: 9.5px !important; color: var(--occ-mobile-muted); }
  .settings-group-table td[data-label="Users"] { grid-column: 1; }
  .settings-group-table td[data-label="Users"]::after { content: ' users'; }
  .settings-group-table td[data-label="Sites"] { grid-column: 1; margin-left: 72px !important; }
  .settings-group-table td[data-label="Sites"]::after { content: ' sites'; }
  .settings-group-table td[data-label="Maps"] { grid-column: 1; margin-left: 138px !important; }
  .settings-group-table td[data-label="Maps"]::after { content: ' maps'; }
  .settings-group-table td[data-label="Status"] { grid-column: 2; grid-row: 1; justify-self: end; font-size: 8.5px !important; font-weight: 800 !important; color: var(--occ-mobile-good); }
  .settings-group-table td[data-label="Actions"] { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; }

  /* Maps */
  .settings-map-table td[data-label="Map"] { grid-column: 1; grid-row: 1 / span 2; }
  .settings-map-table td[data-label="Map"] strong { font-size: 14px !important; line-height: 1.15 !important; }
  .settings-map-table td[data-label="Groups"],
  .settings-map-table td[data-label="Sites"],
  .settings-map-table td[data-label="Drivers"] { grid-row: 3; font-size: 9.5px !important; color: var(--occ-mobile-muted); }
  .settings-map-table td[data-label="Groups"] { grid-column: 1; }
  .settings-map-table td[data-label="Groups"]::after { content: ' groups'; }
  .settings-map-table td[data-label="Sites"] { grid-column: 1; margin-left: 78px !important; }
  .settings-map-table td[data-label="Sites"]::after { content: ' sites'; }
  .settings-map-table td[data-label="Drivers"] { grid-column: 1; margin-left: 142px !important; }
  .settings-map-table td[data-label="Drivers"]::after { content: ' drivers'; }
  .settings-map-table td[data-label="Status"] { grid-column: 2; grid-row: 1; justify-self: end; font-size: 8.5px !important; font-weight: 800 !important; color: var(--occ-mobile-good); }
  .settings-map-table td[data-label="Actions"] { grid-column: 2; grid-row: 2 / span 2; align-self: end; justify-self: end; }

  /* Motion: compact, centered actions contained within the card. */
  .motion-card:not(.reviewed) .motion-actions {
    grid-column: 1 / -1 !important;
    width: auto !important;
    margin: 6px 8px 8px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    border-top: 1px solid #edf1f3 !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  .motion-card:not(.reviewed) .motion-review-action,
  .motion-card:not(.reviewed) .motion-ai-start {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .motion-card:not(.reviewed) .motion-review-action > button:first-child,
  .motion-card:not(.reviewed) .motion-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 7px !important;
    border-radius: 8px !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  .motion-card:not(.reviewed) .motion-ai-start {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    max-width: 210px !important;
  }
}