/**
 * Mobile Shared Components: KPI Card + Filter Sheet
 * Fase 8 + Fase 11
 * Added: 2026-08-06 - Mobile refactor v2
 */

/* ── FASE 8: KPI Card ── */
.kpi-card { border-radius: var(--ss-mobile-card-radius, 12px); }
.kpi-card .card-body { padding: 0.7rem 0.75rem; }
.kpi-label {
    font-size: 0.72rem; color: var(--ss-color-muted, #6c757d);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.1rem; line-height: 1.2;
}
.kpi-value { font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--text-primary, #212529); }
.kpi-icon-wrap { flex-shrink: 0; }
.kpi-icon { font-size: 1.2rem; }
.kpi-helper { font-size: 0.68rem; color: var(--ss-color-muted, #6c757d); margin-top: 0.35rem; line-height: 1.3; }

@media (max-width: 767.98px) {
    .kpi-card .card-body { padding: 0.55rem 0.6rem; }
    .kpi-label { font-size: var(--ss-font-kpi-label, 0.7rem); }
    .kpi-value { font-size: var(--ss-font-kpi-value, 1.4rem); }
    .kpi-icon { font-size: 1rem; }
    .kpi-helper { font-size: 0.65rem; }
}

/* ── FASE 11: Mobile Filter Sheet ── */
.mobile-filter-toggle { display: none; }
@media (max-width: 767.98px) {
    .mobile-filter-toggle { display: inline-flex; align-items: center; gap: 0.3rem; }
    .mobile-filter-sheet { border-radius: 16px 16px 0 0 !important; }
    .mobile-filter-sheet .offcanvas-header { padding: 0.65rem 1rem; }
    .mobile-filter-sheet .offcanvas-body { padding: 0.75rem 1rem; }
    .mobile-filter-sheet .form-select, .mobile-filter-sheet .form-control { font-size: 0.85rem; }
    .filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
    .filter-chip {
        display: inline-flex; align-items: center; gap: 0.3rem;
        padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem;
        font-weight: 500; background: var(--ss-color-primary, #2d5287); color: #fff;
    }
    .filter-chip .filter-chip-remove { cursor: pointer; font-size: 0.85rem; line-height: 1; opacity: 0.8; }
}