/* ==============================
   badge.css — HealthBook UI
   Usage: <span class="badge blue">Doctor</span>
   ============================== */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: capitalize;
    white-space: nowrap;
    line-height: 1.6;
}

/* ── Colour variants ── */
.badge.blue,
.badge.doctor {
    background: #dbeafe;
    color: #1d4ed8;
}

.badge.green,
.badge.staff {
    background: #dcfce7;
    color: #15803d;
}

.badge.purple,
.badge.superadmin {
    background: #ede9fe;
    color: #6d28d9;
}

.badge.red,
.badge.inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.badge.yellow,
.badge.pending {
    background: #fef9c3;
    color: #854d0e;
}

.badge.gray,
.badge.default {
    background: #f3f4f6;
    color: #374151;
}

.badge.orange {
    background: #ffedd5;
    color: #c2410c;
}

.badge.teal {
    background: #ccfbf1;
    color: #0f766e;
}

.badge.indigo {
    background: #e0e7ff;
    color: #3730a3;
}

/* ── Size modifiers ── */
.badge.sm {
    font-size: 10px;
    padding: 1px 7px;
}

.badge.lg {
    font-size: 13px;
    padding: 4px 14px;
}