/* ─── Status Badges ───────────────────────────────────────────────────────── */

.bp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--bp-space-2);
    font-size: var(--bp-text-xs);
    font-weight: var(--bp-weight-semi);
    letter-spacing: 0.02em;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.4;
}

/* ─── Badge Variants ──────────────────────────────────────────────────────── */

.bp-badge--success {
    background-color: var(--bp-success-bg);
    color: var(--bp-success);
}

.bp-badge--warning {
    background-color: var(--bp-warning-bg);
    color: var(--bp-warning);
}

.bp-badge--danger {
    background-color: var(--bp-danger-bg);
    color: var(--bp-danger);
}

.bp-badge--info {
    background-color: var(--bp-info-bg);
    color: var(--bp-info);
}

.bp-badge--neutral {
    background-color: var(--bp-neutral-bg);
    color: var(--bp-neutral);
}

.bp-badge--red {
    background-color: var(--bp-red-light);
    color: var(--bp-red-dark);
}

/* ─── Order Status Badges ─────────────────────────────────────────────────── */

/* Sales Orders */
.bp-badge--so-open       { @extend .bp-badge--info; }
.bp-badge--so-closed     { @extend .bp-badge--success; }
.bp-badge--so-cancelled  { @extend .bp-badge--neutral; }
.bp-badge--so-pending    { @extend .bp-badge--warning; }

/* Invoices */
.bp-badge--inv-open      { background-color: var(--bp-warning-bg); color: var(--bp-warning); }
.bp-badge--inv-paid      { background-color: var(--bp-success-bg); color: var(--bp-success); }
.bp-badge--inv-overdue   { background-color: var(--bp-danger-bg); color: var(--bp-danger); }
.bp-badge--inv-credit    { background-color: var(--bp-info-bg); color: var(--bp-info); }

/* Proposals */
.bp-badge--prop-draft     { background-color: var(--bp-neutral-bg); color: var(--bp-neutral); }
.bp-badge--prop-submitted { background-color: var(--bp-info-bg); color: var(--bp-info); }
.bp-badge--prop-approved  { background-color: var(--bp-success-bg); color: var(--bp-success); }
.bp-badge--prop-converted { background-color: #e8f4fd; color: #2b6cb0; }

/* Returns */
.bp-badge--rma-submitted    { background-color: var(--bp-info-bg); color: var(--bp-info); }
.bp-badge--rma-review       { background-color: var(--bp-warning-bg); color: var(--bp-warning); }
.bp-badge--rma-approved     { background-color: var(--bp-success-bg); color: var(--bp-success); }
.bp-badge--rma-rejected     { background-color: var(--bp-danger-bg); color: var(--bp-danger); }
.bp-badge--rma-completed    { background-color: var(--bp-neutral-bg); color: var(--bp-neutral); }

/* ─── Dot Indicators ──────────────────────────────────────────────────────── */

.bp-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--bp-space-1);
    flex-shrink: 0;
}

.bp-dot--success  { background-color: var(--bp-success); }
.bp-dot--warning  { background-color: var(--bp-warning); }
.bp-dot--danger   { background-color: var(--bp-danger); }
.bp-dot--info     { background-color: var(--bp-info); }
.bp-dot--neutral  { background-color: var(--bp-gray-mid); }

/* ─── Notification Badge (topbar bell) ───────────────────────────────────── */

.bp-notif-badge {
    position: relative;
    display: inline-flex;
}

.bp-notif-badge__count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background-color: var(--bp-red);
    color: var(--bp-white);
    font-size: 10px;
    font-weight: var(--bp-weight-bold);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}