Make device detail page and list summary bars consistent with new online status design

[n-lark]

Use online/offline status for color + appearance on device detail page and list summary bars

Follow-up to #7827. That work added a single connectivity-colored Status pill (online / offline / never-seen) to the device tables. Two surfaces were intentionally left untouched and now feel inconsistent with it.

Problems

• Device detail page is inconsistent with the list. The Overview header + Connection card still use the old "Last Seen" + "Last Known Status" pattern and don't reflect the computed online/offline status at all.
• The misleading state still shows here. A device that hasn't been seen in weeks can still present a confident green "running" pill on its detail page — the exact thing Improve UI for device status #7827 fixed in the list.
• "Last Seen" reads as an error when it shouldn't. A long-gone device shows a red "Last Seen" badge, but being offline is a neutral state, not a failure.
• The list summary bars are out of step. The "Last Seen" + "Last Known Status" bars above the device table don't use the online/offline concept, so they no longer match the column beneath them.

Notes

• Where there's more space (detail page, summary bars), separate glanceable badges are more useful "at a glance" than the table's single merged pill.
• The device overview pill's color should reflect online/offline status.
• Whatever we do should align across the header, the Connection card, and the summary bars.