/* ==========================================================================
   BALAM AI - Progress / Meter Component
   --------------------------------------------------------------------------
   GLOBAL, token-driven progress + meter bars. Promoted out of
   pages/subscription.css so they render everywhere (dashboard, billing,
   and the staff /styleguide page which does NOT load subscription.css).

   100% theme-token-driven (var(--balam-*)) — NO hardcoded hex/rgb.
   Self-contained: relies only on tokens defined in css/tokens/* +
   shared-variables.css.

   Selectors:
     Legacy (subscription credits meter — kept for backward compat):
       .credits-meter
       .meter-fill   (+ .low, .critical, .credit-updated)
     Generic (reusable global progress bar — prefer for new code):
       .balam-progress
       .balam-progress__bar (+ --warning, --danger, --success, --updated)

   Tokens used:
     --balam-primary / --balam-secondary (+ -rgb variants)
     --balam-warning  --balam-danger  --balam-success
     --balam-bg-secondary  --balam-gray-200  --balam-gray-300
     --balam-radius-full
   ========================================================================== */

/* --------------------------------------------------------------------------
   Legacy: Credits Meter (subscription dashboard)
   -------------------------------------------------------------------------- */
.credits-meter {
    height: 10px;
    background: var(--balam-gray-200, var(--balam-bg-secondary));
    border: 1px solid var(--balam-gray-300, transparent);
    border-radius: var(--balam-radius-full);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--balam-primary), var(--balam-secondary));
    border-radius: var(--balam-radius-full);
    transition: width 0.4s ease;
}

.meter-fill.low {
    background: var(--balam-warning);
}

.meter-fill.critical {
    background: var(--balam-danger);
}

/* Real-time update animation (e.g. live credit deduction) */
.meter-fill.credit-updated {
    animation: balamProgressPulse 0.5s ease-out;
}

/* --------------------------------------------------------------------------
   Generic: Reusable global progress bar (BEM)
   -------------------------------------------------------------------------- */
.balam-progress {
    height: 10px;
    background: var(--balam-gray-200, var(--balam-bg-secondary));
    border: 1px solid var(--balam-gray-300, transparent);
    border-radius: var(--balam-radius-full);
    overflow: hidden;
}

.balam-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--balam-primary), var(--balam-secondary));
    border-radius: var(--balam-radius-full);
    transition: width 0.4s ease;
}

.balam-progress__bar--warning {
    background: var(--balam-warning);
}

.balam-progress__bar--danger {
    background: var(--balam-danger);
}

.balam-progress__bar--success {
    background: var(--balam-success);
}

/* Optional real-time update pulse */
.balam-progress__bar--updated {
    animation: balamProgressPulse 0.5s ease-out;
}

/* --------------------------------------------------------------------------
   Shared keyframes (token-driven pulse — replaces hardcoded rgba)
   -------------------------------------------------------------------------- */
@keyframes balamProgressPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--balam-primary-rgb), 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(var(--balam-primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--balam-primary-rgb), 0);
    }
}