/* =========================
   STATUS BADGE (FLUENT CLEAN)
========================= */

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 20px; /* 🔥 fix tinggi biar konsisten */
    padding: 0 8px;

    border-radius: var(--ms-radius-pill);

    font-size: 12px;
    font-weight: var(--ms-font-weight-medium);
    line-height: 1;

    white-space: nowrap;

    border: 1px solid transparent;

    /* smoother rendering */
    letter-spacing: 0.2px;
}


/* =========================
   VARIANTS
========================= */

/* PRIMARY */
.status-primary {
    background: var(--ms-color-primary-subtle);
    color: var(--ms-color-primary-strong);
    border-color: var(--ms-color-primary-light);
}

/* SUCCESS */
.status-success {
    background: var(--ms-color-success-subtle);
    color: var(--ms-color-success-strong);
    border-color: var(--ms-color-success-light);
}

/* DANGER */
.status-danger {
    background: var(--ms-color-danger-subtle);
    color: var(--ms-color-danger-strong);
    border-color: var(--ms-color-danger-light);
}

/* WARNING */
.status-warning {
    background: var(--ms-color-warning-subtle);
    color: var(--ms-color-warning-strong);
    border-color: var(--ms-color-warning-light);
}

/* SECONDARY / NEUTRAL */
.status-secondary {
    background: var(--ms-color-neutral-100);
    color: var(--ms-color-text-secondary);
    border-color: var(--ms-color-border-subtle);
}


/* =========================
   OPTIONAL: SIZE VARIANTS
========================= */

.status-badge--sm {
    height: 18px;
    font-size: 11px;
    padding: 0 6px;
}

.status-badge--lg {
    height: 24px;
    font-size: 13px;
    padding: 0 10px;
}