/**
 * Mobile Views: Scanners
 * Fases 19-22: Filter chips, compact cards, expanded view, gauge rows.
 * Added: 2026-08-06 - Mobile refactor v2
 */
@media (max-width: 767.98px) {
    /* ── Filter checkboxes → chips ── */
    #section-scanners .form-check { margin: 0; }
    #section-scanners .form-check-input { display: none; }
    #section-scanners .form-check-label {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.72rem;
        font-weight: 500; cursor: pointer; background: #f0f0f0; color: #555;
        border: 1px solid transparent; transition: all 0.15s;
    }
    #section-scanners .form-check-input:checked + .form-check-label {
        background: var(--ss-color-primary, #2d5287); color: #fff;
        border-color: var(--ss-color-primary, #2d5287);
    }
    #section-scanners .form-check-label i { font-size: 0.75rem; }

    /* ── Cards: 1 per row, compact ── */
    #scannersList > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    #section-scanners .scanner-card .card-body { padding: 0.5rem 0.6rem !important; }
    #section-scanners .scanner-card .card-header { padding: 0.5rem 0.65rem !important; }
    #section-scanners .scanner-card-title { font-size: 0.8rem !important; }
    #section-scanners .scanner-card .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.7rem; }
    #section-scanners .scanner-card .card-body > div { margin-bottom: 0.25rem !important; }
    #section-scanners .scanner-card .card-body small.text-muted.text-uppercase { font-size: 0.58rem !important; }
    #section-scanners .scanner-card .gauge-bar-container { height: 14px !important; }
    #section-scanners .scanner-card .progress { height: 5px !important; }
    #section-scanners #searchInput { font-size: 0.82rem; padding: 0.4rem 0.6rem; }

    /* ── Expanded view ── */
    #scannersList > .card > .card-header .d-flex.justify-content-between { flex-wrap: wrap; gap: 0.4rem; }
    #scannersList > .card > .card-header h5 { font-size: 0.85rem; line-height: 1.3; }
    #scannersList > .card > .card-header .badge { font-size: 0.65rem; }
    #scannersList > .card > .card-header .btn-sm { padding: 0.2rem 0.4rem; font-size: 0.7rem; }
    #expanded-scanner-body .row > .col-md-3, #expanded-scanner-body .row > [class*="col-md-"] { flex: 0 0 50%; max-width: 50%; margin-bottom: 0.5rem; }

    /* ── Gauge rows ── */
    .gauge-row { column-gap: 0.3rem !important; }
    .gauge-label { font-size: 0.68rem !important; }
    .gauge-value-container { font-size: 0.72rem !important; }
    .scanner-detail-gauge, .scanner-detail-ss-gauge { min-height: 2rem !important; }
    #expanded-scanner-body .scanner-detail-gauge .progress, #expanded-scanner-body .scanner-detail-ss-gauge .progress { height: 4px !important; }
}