/**
 * Mobile Views: Network Monitor
 * Fase 10: Device cards on mobile, table on desktop.
 * Added: 2026-08-06 - Mobile refactor v2
 */
.nm-mobile-cards { display: none; }
@media (max-width: 767.98px) {
    .nm-table-wrap { display: none !important; }
    .nm-mobile-cards { display: block; }
    .nm-device-card {
        background: var(--ss-color-card-bg, #fff); border: 1px solid var(--ss-color-border, #dee2e6);
        border-radius: var(--ss-mobile-card-radius, 12px); padding: 0.65rem 0.75rem;
        margin-bottom: 0.5rem; cursor: pointer; transition: box-shadow 0.15s;
    }
    .nm-device-card:active { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .nm-card-top { display: flex; align-items: flex-start; gap: 0.5rem; }
    .nm-card-status-icon { font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
    .nm-card-info { flex: 1; min-width: 0; }
    .nm-card-name { font-weight: 600; font-size: 0.85rem; line-height: 1.3; word-break: break-word; }
    .nm-card-desc { font-weight: 400; color: var(--ss-color-muted, #6c757d); font-size: 0.75rem; }
    .nm-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: 0.72rem; }
    .nm-card-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
    .nm-online { background: #d1e7dd; color: #0f5132; }
    .nm-offline { background: #e2e3e5; color: #41464b; }
    .nm-card-ip { font-size: 0.7rem; color: var(--ss-color-muted, #6c757d); }
    .nm-card-time { color: var(--ss-color-muted, #6c757d); font-size: 0.68rem; }
    .nm-card-chevron { font-size: 0.7rem; color: var(--ss-color-muted, #6c757d); margin-top: 3px; flex-shrink: 0; transition: transform 0.2s; }
    .nm-card-uptime { display: flex; gap: 0.3rem; margin-top: 0.4rem; padding-left: 1.6rem; }
    .nm-uptime-badge { font-size: 0.62rem; padding: 0.12em 0.4em; }
    .nm-uptime-na { font-size: 0.62rem; padding: 1px 5px; border-radius: 8px; background: #e2e3e5; color: #41464b; font-weight: 600; }
    .nm-card-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ss-color-border, #dee2e6); overflow-x: auto; }
    .nm-card-detail .vpn-insights-layout { grid-template-columns: 1fr !important; gap: 10px; }
    .nm-card-detail .vpn-insights-card { padding: 8px; min-width: 0; overflow: hidden; }
    .nm-card-detail .vpn-racetrack-shell { max-width: 100%; aspect-ratio: 2/1; }
    .nm-card-detail .vpn-racetrack-center-card { min-width: 150px; padding: 6px 10px; gap: 6px; }
    .nm-card-detail .vpn-racetrack-logo { width: 36px; height: 36px; }
    .nm-card-detail .vpn-racetrack-total { font-size: 15px; }
    .nm-card-detail .vpn-racetrack-kicker { font-size: 9px; }
    .nm-card-detail .vpn-daily-row, .nm-card-detail .vpn-daily-scale-grid { grid-template-columns: 40px minmax(0,1fr) 34px; gap: 5px; }
    .nm-card-detail .vpn-daily-label, .nm-card-detail .vpn-daily-value { font-size: 10px; }
    .nm-card-detail .vpn-insights-title { font-size: 11px; margin-bottom: 6px; }
    .nm-card-detail .vpn-session-pill { font-size: 10px; padding: 3px 5px; }
    .nm-detail-uptime { display: flex; gap: 0.35rem; flex-wrap: wrap; }
    .nm-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0; font-size: 0.75rem; }
    .nm-detail-label { color: var(--ss-color-muted, #6c757d); font-size: 0.7rem; }
    .nm-detail-value { font-weight: 500; text-align: right; max-width: 60%; font-size: 0.72rem; }
    .nm-detail-value code { font-size: 0.68rem; }
}