/**
 * Mobile Views: Events + Users
 * Fase 13 (event cards) + Fase 15 (user cards).
 * Added: 2026-08-06 - Mobile refactor v2
 */
/* Mobile-only user cards: hidden by default, shown only under the max-width breakpoint below */
.usr-mobile-cards { display: none; }

/* Alerts/Events: desktop shows the table, mobile shows compact cards */
.alerts-mobile-cards { display: none; }
.events-mobile-cards { display: none; }

@media (max-width: 767.98px) {
    /* Swap tables for cards on Alerts and Events */
    .alerts-table-card, .events-table-card { display: none !important; }
    .alerts-mobile-cards { display: block; }
    .events-mobile-cards { display: block; }

    /* ── Event cards ── */
    .evt-card .card-body { padding: 0.45rem 0.6rem !important; }
    .evt-name { font-size: 0.8rem; }
    .evt-time { font-size: 0.65rem; }
    .evt-detail { font-size: 0.7rem; }
    .evt-card .badge { font-size: 0.62rem; padding: 0.15em 0.4em; }

    /* ── User cards ── */
    #usersList .table-responsive, #usersList table { display: none !important; }
    .usr-mobile-cards { display: block; }
    .usr-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.6rem 0.7rem; margin-bottom: 0.4rem;
    }
    .usr-card-top { display: flex; align-items: center; gap: 0.5rem; }
    .usr-card-avatar { font-size: 1.5rem; color: var(--ss-color-muted, #6c757d); flex-shrink: 0; }
    .usr-card-info { flex: 1; min-width: 0; }
    .usr-card-name { font-weight: 600; font-size: 0.85rem; }
    .usr-card-meta { font-size: 0.7rem; margin-top: 2px; }
    .usr-role-badge { font-size: 0.6rem; padding: 0.12em 0.4em; }
    .usr-card-company { color: var(--ss-color-muted, #6c757d); margin-left: 0.3rem; }
    .usr-card-contact { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; font-size: 0.7rem; color: var(--ss-color-muted, #6c757d); }
    .usr-card-scanners { display: flex; gap: 0.6rem; margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--ss-color-border, #dee2e6); font-size: 0.68rem; }
    .usr-scanner-stat { color: var(--ss-color-muted, #6c757d); }
    .usr-card-actions { display: flex; gap: 0.25rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
    .usr-card-actions .btn { padding: 0.2rem 0.35rem; font-size: 0.7rem; }

    /* Team member card, nested under its master's card */
    .usr-card-team-member {
        margin-left: 1rem;
        border-style: dashed;
        background: var(--ss-color-subtle-bg, #f8f9fa);
    }
    .usr-card-team-member .usr-card-name { font-size: 0.8rem; }

    /* Online/offline presence dot (Users list, mobile cards) */
    .usr-card-top .user-online-dot { flex-shrink: 0; }
}