/* ── Table Bottom (sticky summary + paging) ── */
.table-bottom,
.dg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    /* 98% opaque — hampir solid, konten di bawahnya nyaris tak terlihat.
       NB: var(--surface) sendiri semi-transparan, jadi pakai warna solid dulu
       lalu lapis 98% alpha di atasnya via color-mix dengan base opaque. */
    background: rgb(255 255 255 / 0.98); /* fallback light */
    background: color-mix(in srgb, var(--surface-solid, var(--surface)) 98%, transparent);
    border: 1px solid var(--border-light);
    margin-top: auto;
    border-radius: 12px;
    flex-shrink: 0;
    position: sticky;
    bottom: 4px;
    z-index: 10;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
}
.dark .table-bottom,
.dark .dg-footer {
    background: rgb(21 21 21 / 0.98); /* fallback dark solid */
    background: color-mix(in srgb, var(--surface-solid, #151515) 98%, transparent);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.35);
}

/* Mobile: sticky bottom tidak tertutup Bottom Navigation (56px) */
@media (max-width: 899px) {
    .table-bottom,
    .dg-footer {
        bottom: 2px; /* rapat ke bawah — di mobile .main-area padding-bottom menyediakan clearance dari bottom-nav */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    }
    .dark .table-bottom,
    .dark .dg-footer { box-shadow: 0 -2px 10px rgba(0,0,0,0.35); }
}
.table-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}
.table-summary strong {
    color: var(--text-primary);
    font-weight: 700;
}
.summary-sep {
    color: var(--border-color);
}
.paging-control {
    display: flex;
    align-items: center;
    gap: 4px;
}
.paging-info {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 0 8px;
    white-space: nowrap;
}
.paging-info strong {
    color: var(--text-primary);
}

/* Filter NumInput mengikuti tinggi field M3 global. */
.filter-input {
    height: 48px !important;
    padding: 12px 12px !important;
}