/* ============================================
   Blocked Usernames Modal - Compact Style
   ============================================ */

/* Blokir Username — sisanya memakai design system .compact-modal.
   Sama seperti .reseller-modal: max-width hanya berlaku saat elemennya benar-benar
   kotak modal, bukan saat ia jadi panel tab di dalam #passwordListModal. */
.modal-content.blocked-modal {
    max-width: 780px;
}

.blocked-table-wrap {
    max-height: 300px;
}

/* Small data table */
.data-table.data-table-sm th,
.data-table.data-table-sm td {
    padding: 6px 8px;
    font-size: 11px;
}

.data-table.data-table-sm th {
    background: var(--bg-color);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--secondary-color);
}

/* Dark theme: cukup ikut token tema, tidak perlu override per-komponen lagi. */
[data-theme="dark"] .data-table.data-table-sm th {
    background: var(--table-header-bg);
}

.customer-detail-table-wrap {
    max-height: 360px;
    overflow: auto;
}

.customer-detail-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#customerDetailModal .customer-detail-filter-actions {
    align-items: flex-end;
}

#customerDetailModal .customer-detail-highlight-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--text-color);
}

.customer-detail-highlight-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-detail-highlight-helper {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--secondary-color);
    font-size: 12px;
    line-height: 1.5;
    padding: 10px;
}

.customer-detail-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.customer-detail-highlight-card {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    padding: 12px;
}

.customer-detail-highlight-card h3 {
    margin: 0 0 8px;
    font-size: 13px;
}

.customer-detail-highlight-hint {
    margin-top: 8px;
    font-size: 11px;
    color: var(--secondary-color);
    line-height: 1.45;
}

.customer-detail-highlight-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

#customerDetailHighlightConfigModal #customerDetailHighlightKeywordInput {
    min-width: 180px;
}

.customer-detail-highlight-keyword-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.customer-detail-highlight-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    padding: 3px 9px;
    font-size: 11px;
    line-height: 1.2;
}

.customer-detail-highlight-chip.is-base {
    background: rgba(148, 163, 184, 0.14);
    border-style: dashed;
    color: var(--secondary-color);
}

.customer-detail-highlight-chip.is-extra {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: var(--text-color);
    cursor: pointer;
}

.customer-detail-highlight-chip.is-extra:hover {
    background: rgba(59, 130, 246, 0.2);
}

.customer-detail-highlight-chip.is-extra i {
    font-size: 10px;
    opacity: 0.8;
}

.customer-detail-table td.customer-detail-username-td-highlight {
    background: hsl(var(--customer-detail-highlight-h, 20) 95% 94% / 0.88);
    box-shadow: inset 4px 0 0 hsl(var(--customer-detail-highlight-h, 20) 78% 58%);
}

.customer-detail-username-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    padding: 2px 6px;
}

.customer-detail-username-highlight {
    background: hsl(var(--customer-detail-highlight-h, 20) 95% 93%);
    border: 1px solid hsl(var(--customer-detail-highlight-h, 20) 75% 78%);
    color: hsl(var(--customer-detail-highlight-h, 20) 68% 24%);
}

.customer-detail-username-highlight-keyword {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: hsl(var(--customer-detail-highlight-h, 20) 92% 85%);
    color: hsl(var(--customer-detail-highlight-h, 20) 70% 24%);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 2px 6px;
}

[data-theme="dark"] .customer-detail-highlight-chip.is-base {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.5);
    color: #cbd5e1;
}

[data-theme="dark"] .customer-detail-highlight-chip.is-extra {
    background: rgba(96, 165, 250, 0.2);
    border-color: rgba(96, 165, 250, 0.5);
    color: #e2e8f0;
}

[data-theme="dark"] .customer-detail-highlight-chip.is-extra:hover {
    background: rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .customer-detail-table td.customer-detail-username-td-highlight {
    background: hsl(var(--customer-detail-highlight-h, 20) 64% 24% / 0.45);
    box-shadow: inset 4px 0 0 hsl(var(--customer-detail-highlight-h, 20) 82% 62% / 0.9);
}

[data-theme="dark"] .customer-detail-username-highlight {
    background: hsl(var(--customer-detail-highlight-h, 20) 80% 28% / 0.4);
    border-color: hsl(var(--customer-detail-highlight-h, 20) 75% 50% / 0.85);
    color: hsl(var(--customer-detail-highlight-h, 20) 98% 88%);
}

[data-theme="dark"] .customer-detail-username-highlight-keyword {
    background: hsl(var(--customer-detail-highlight-h, 20) 78% 38% / 0.7);
    color: hsl(var(--customer-detail-highlight-h, 20) 100% 94%);
}

#customerDetailModal .customer-detail-action-btn.btn-icon-only {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#customerDetailModal .customer-detail-action-btn.btn-icon-only i {
    margin: 0;
    font-size: 14px;
}

.customer-detail-wa-dropdown {
    position: relative;
}

.customer-detail-wa-dropdown > summary {
    list-style: none;
    cursor: pointer;
}

.customer-detail-wa-dropdown > summary::-webkit-details-marker {
    display: none;
}

.customer-detail-wa-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    display: none;
    flex-direction: column;
    min-width: 210px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    z-index: 40;
    overflow: hidden;
}

.customer-detail-wa-dropdown.is-open-up .customer-detail-wa-dropdown-menu {
    top: auto;
    bottom: calc(100% + 6px);
}

.customer-detail-wa-dropdown.is-align-left .customer-detail-wa-dropdown-menu {
    right: auto;
    left: 0;
}

.customer-detail-wa-dropdown[open] .customer-detail-wa-dropdown-menu {
    display: flex;
}

.customer-detail-wa-dropdown.is-floating .customer-detail-wa-dropdown-menu {
    position: fixed;
    top: var(--customer-wa-menu-top, 0px);
    left: var(--customer-wa-menu-left, 0px);
    right: auto;
    bottom: auto;
    z-index: 12000;
}

.customer-detail-wa-dropdown-menu button {
    border: none;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 11px;
    cursor: pointer;
}

.customer-detail-wa-dropdown-menu button:last-child {
    border-bottom: none;
}

.customer-detail-wa-dropdown-menu button:hover {
    background: var(--table-hover);
}

.customer-detail-wa-modal-body {
    padding: 16px;
}

.customer-detail-wa-target-info {
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--secondary-color);
    background: var(--bg-color);
}

.customer-detail-wa-filter-config-row {
    margin-top: 8px;
    margin-left: 52px;
}

#customerDetailWaNotificationFilterModal {
    z-index: 1200;
}

#customerDetailWaNotificationFilterModal .modal-content {
    position: relative;
    z-index: 1201;
}

.customer-detail-wa-filter-config-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}

.customer-detail-wa-filter-config-link:hover,
.customer-detail-wa-filter-config-link:focus {
    color: var(--primary-dark);
    text-decoration: underline;
}

.customer-detail-wa-filter-summary {
    margin-top: 6px;
    margin-left: 52px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--secondary-color);
}

.customer-detail-wa-filter-summary[data-active="true"] {
    color: var(--text-color);
}

.customer-detail-wa-filter-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customer-detail-wa-filter-helper {
    font-size: 12px;
    line-height: 1.5;
    color: var(--secondary-color);
}

.customer-detail-wa-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.customer-detail-wa-filter-logic-label {
    margin-top: 6px;
    font-size: 11px;
    color: var(--secondary-color);
}

.customer-detail-wa-filter-logic-select {
    margin-top: 4px;
}

.customer-detail-wa-filter-note {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .customer-detail-wa-filter-grid {
        grid-template-columns: 1fr;
    }

    .customer-detail-wa-filter-config-row,
    .customer-detail-wa-filter-summary {
        margin-left: 0;
    }

    .customer-detail-highlight-grid {
        grid-template-columns: 1fr;
    }

    .customer-detail-highlight-input-row {
        flex-wrap: wrap;
    }

    #customerDetailHighlightConfigModal #customerDetailHighlightKeywordInput {
        min-width: 0;
        flex: 1 1 100%;
    }
}

.customer-detail-wa-editor-wrap,
.customer-detail-wa-preview-wrap {
    margin-bottom: 10px;
}

.customer-detail-wa-template-input {
    min-height: 180px;
    resize: vertical;
    margin-top: 6px;
}

.customer-detail-wa-placeholder-box {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    color: var(--secondary-color);
}

.customer-detail-wa-placeholder-list {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.customer-detail-wa-placeholder-item {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    font-size: 11px;
    color: var(--text-color);
}

.customer-detail-wa-preview-text {
    margin: 6px 0 0;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 130px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.45;
}

.reseller-table-wrap {
    max-height: 320px;
    overflow: auto;
}

.buyer-stats-modal {
    max-width: 1180px;
}

/* Body modal jadi grid dua kolom — panel kiri memilih pembeli, kanan menampilkan detailnya. */
.buyer-stats-layout {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(400px, 1.25fr);
    gap: var(--cm-gap);
    align-items: start;
}

.buyer-stats-left-panel,
.buyer-stats-right-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cm-gap);
}

.buyer-stats-filter-grid {
    display: grid;
    gap: var(--cm-gap-sm);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--cm-gap-sm);
}

.buyer-stats-current-user {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 8px;
    background: var(--cm-surface-muted);
}

.buyer-stats-current-user strong {
    font-size: 14px;
    color: var(--text-color);
}

.buyer-stats-table-wrap {
    max-height: 460px;
    outline: none;
}

.buyer-stats-table-wrap:focus-visible {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

#buyerOrderStatsModal .buyer-stats-users-table tbody tr,
#buyerOrderStatsModal .buyer-stats-orders-table tbody tr,
#buyerOrderStatsModal .buyer-stats-bonus-claims-table tbody tr {
    border-bottom-width: 1px;
}

#buyerOrderStatsModal .buyer-bonus-claim-cell {
    width: 1%;
    white-space: nowrap;
    padding: 4px 0;
}

#buyerOrderStatsModal .buyer-bonus-claim-btn.btn-icon-only {
    padding: 6px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#buyerOrderStatsModal .buyer-bonus-claim-btn.btn-icon-only i {
    margin: 0;
}

.buyer-stats-users-table {
    width: 100%;
    margin: 0;
}

.buyer-stats-users-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.buyer-stats-users-table tbody tr[data-buyer-index] {
    cursor: pointer;
}

.buyer-stats-users-table .buyer-bonus-claim-cell {
    text-align: center;
    white-space: nowrap;
}

#buyerOrderStatsModal .buyer-bonus-claim-link {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#buyerOrderStatsModal .buyer-bonus-claim-link:hover,
#buyerOrderStatsModal .buyer-bonus-claim-link:focus {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    text-decoration: none;
}

#buyerOrderStatsModal .buyer-bonus-claim-link:active {
    background: rgba(59, 130, 246, 0.16);
}

.buyer-stats-users-table tbody tr[data-buyer-index]:hover {
    background: var(--table-hover);
}

.buyer-stats-row-active {
    background: rgba(37, 99, 235, 0.12) !important;
}

.buyer-stats-group-row td {
    background: var(--light-color);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 12px;
}

[data-theme="dark"] .buyer-stats-row-active {
    background: rgba(59, 130, 246, 0.28) !important;
}

[data-theme="dark"] .buyer-stats-group-row td {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
}

.buyer-stats-orders-wrap,
.buyer-stats-bonus-claims-wrap {
    max-height: 240px;
}

.buyer-stats-orders-table,
.buyer-stats-bonus-claims-table {
    width: 100%;
    margin: 0;
}

.buyer-stats-orders-table thead th,
.buyer-stats-bonus-claims-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.buyer-bonus-claim-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.buyer-bonus-claim-status.success {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
}

.buyer-bonus-claim-status.failed {
    background: rgba(239, 68, 68, 0.16);
    color: #b91c1c;
}

.buyer-bonus-claim-status.skipped {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

[data-theme="dark"] .buyer-bonus-claim-status.success {
    background: rgba(34, 197, 94, 0.28);
    color: #86efac;
}

[data-theme="dark"] .buyer-bonus-claim-status.failed {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

[data-theme="dark"] .buyer-bonus-claim-status.skipped {
    background: rgba(245, 158, 11, 0.28);
    color: #fcd34d;
}

@media (max-width: 1100px) {
    .buyer-stats-layout {
        grid-template-columns: 1fr;
    }

    .buyer-stats-filter-grid {
        grid-template-columns: 1fr;
    }
}

.credit-usage {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 14px;
    margin-top: 8px;
    box-shadow: var(--shadow);
}

.credit-usage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.credit-usage-bar {
    width: 100%;
    height: 10px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}

.credit-usage-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2ecc71, #f1c40f, #e74c3c);
    transition: width 0.3s ease;
}

.stat-info {
    /* Reserve ~35% for the info block when chart is present to reduce wrapping */
    flex: 0 0 35%;
    max-width: 35%;
    min-width: 0;
    box-sizing: border-box;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}

/* Make first and third stat cards (Total Data, Tidak Dipakai) use larger info area */
.stats-grid .stat-card:nth-child(1) .stat-info,
.stats-grid .stat-card:nth-child(3) .stat-info {
    flex: 0 0 80% !important;
    max-width: 80% !important;
}

/* Ensure chart (if present) in those cards shrinks or hides */
.stats-grid .stat-card:nth-child(1) .stat-chart,
.stats-grid .stat-card:nth-child(3) .stat-chart {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

.stat-label {
    color: var(--secondary-color);
    font-size: 12px;
    margin-bottom: 2px;
}

.stat-value {
    color: var(--dark-color);
    font-size: 28px;
    font-weight: 700;
}

.stat-value .stat-value-percent {
    font-size: 0.5em;
    font-weight: 600;
}

.stat-sublabel {
    font-size: 12px;
    color: var(--danger-color);
    margin-top: 4px;
    font-weight: 500;
}

.stat-sublabel-neutral {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

.stat-sublabel-danger {
    color: #e74c3c;
}

.stat-sublabel-info {
    color: #2563eb;
}

/*
 * ===== Kartu "Dipakai" =====
 *
 * Kartu ini SELALU setinggi baris grid — yang menentukan kartu "Total Data" dengan 5 barisnya,
 * bukan isi kartu ini sendiri. Jadi ada dua hal terpisah yang harus benar:
 *
 *   1. Blok teksnya sependek mungkin. Kolom info cuma 35% lebar, dan tanpa `nowrap` teks
 *      "38 (31,9%)" jatuh ke baris kedua — satu baris penuh terbuang cuma untuk persentase.
 *   2. Tinggi yang tidak dipakai teks harus jatuh ke GRAFIK. Sebelumnya `.stat-chart` dipatok
 *      64px, jadi sisa tinggi kartu menganggur sebagai ruang kosong dan batangnya kerdil.
 */
.stat-card-usage .stat-info {
    align-self: stretch;
    justify-content: flex-start;
    padding-top: 3px;
}

.stat-card-usage .stat-label {
    margin-bottom: 0;
}

.stat-card-usage .stat-value {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    line-height: 1.15;
}

.stat-card-usage .stat-value .stat-value-percent {
    font-size: 0.42em;
    color: var(--secondary-color);
}

/* Expired menempel di bawah angka — jaraknya dari line-height, bukan margin. */
.stat-card-usage .stat-sublabel {
    margin-top: 0;
    line-height: 1.25;
}

/* Diregangkan mengikuti tinggi kartu; 64px turun jadi lantai, bukan patokan.
   `.stat-mini-chart` sudah `flex: 1 1 auto`, jadi tambahan tinggi otomatis jadi jatah batang. */
.stat-card-usage .stat-chart {
    height: auto;
    min-height: 64px;
}

.stat-card-usage-avg {
    align-items: center;
    gap: 10px;
}

.stat-card-usage-avg .stat-info {
    flex: 1 1 auto;
    max-width: none;
    padding-right: 4px;
}

.stat-extra-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 120px;
}

.stat-inline-label {
    font-size: 11px;
    color: var(--secondary-color);
}

.stat-inline-select {
    min-width: 120px;
    font-size: 12px;
    padding: 4px 8px;
}

.stat-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    /* Chart should occupy remaining space; adjusted to accommodate wider info */
    flex: 1 1 65%;
    max-width: 65%;
    min-width: 0;
    box-sizing: border-box;
    height: 64px;
    /* fixed chart height to keep card height stable */
}

.stat-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex: 1 1 auto;
    /* grow to fill .stat-chart height */
    width: 100%;
    justify-content: space-between;
    height: 44px;
    /* fixed bar area height to prevent card growth */
    min-height: 44px;
    /* ensure minimal visible area */
}

.mini-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 10px;
    /* Fill the chart height so percentage heights inside work */
    height: 100%;
    justify-content: flex-end;
}

.mini-bar-fill {
    max-height: 100%;
}

.mini-bar-fill {
    width: 100%;
    height: var(--bar-height, 20%);
    background: linear-gradient(180deg, rgba(52, 152, 219, 0.95), rgba(46, 204, 113, 0.9));
    border-radius: 4px;
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.5s cubic-bezier(.2, .9, .2, 1), background 0.12s;
    display: block;
}

.stat-mini-chart.animate .mini-bar-fill {
    transform: scaleY(1);
}

/*
 * Jarak label & nilai diatur SEMATA lewat `gap` di .mini-bar, tanpa margin.
 * Alasannya bukan gaya: tinggi pita label ini DIUKUR runtime (measureMiniBarLabelBandPx di
 * 11-stat-cards.js) untuk menentukan sisa ruang batang. Pengukurnya membaca offsetHeight —
 * yang tidak memuat margin — jadi margin di sini akan jadi tinggi yang tak terlihat olehnya
 * dan batang meluber menimpa labelnya sendiri.
 */
.mini-bar-label {
    font-size: 8px;
    color: var(--secondary-color);
    line-height: 1;
}

.mini-bar-value {
    font-size: 10px;
    color: var(--dark-color);
    font-weight: 600;
    line-height: 1;
}

/*
 * Ringkasan pemakaian hari berjalan — mengisi sisa ruang .stat-chart (64px)
 * di bawah .stat-mini-chart (44px) tanpa menambah tinggi card.
 */
.stat-chart-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    line-height: 1;
    white-space: nowrap;
    /* Jangan pernah diciutkan oleh .stat-mini-chart yang flex-grow. */
    flex: 0 0 auto;
}

.stat-chart-footer-label,
.stat-chart-footer-sep {
    font-size: 9px;
    color: var(--secondary-color);
}

.stat-chart-footer-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-color);
}

.stat-chart-footer-ratio {
    font-size: 12px;
    font-weight: 700;
    color: var(--tone-ready);
}

/* Responsive: stack stat info and chart on small screens */
@media (max-width: 720px) {
    .stat-card {
        align-items: flex-start;
        gap: 12px;
        padding: 10px;
    }

    .stat-info {
        flex: 1 1 auto;
        max-width: 100%;
    }

    .stat-chart {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
        align-items: center;
        /* Mini chart di mobile lebih tinggi (48px) — beri ruang untuk baris ringkasan
           di bawahnya, tinggi 64px desktop tidak cukup lagi. */
        height: auto;
        min-height: 64px;
    }

    .stat-mini-chart {
        height: 48px;
    }
}

/* Controls */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.controls-left {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}