/* ─── User Group Banners ───────────────────────────────────── */

.userBanner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--banner-fg, #fff);
    line-height: 1.6;
    white-space: nowrap;
}

.userBanner i {
    font-size: 0.65rem;
}

.userBanner--hidden {
    display: none;
}

/* ─── Solid Gradient Banners ──────────────────────────────── */
/* Gradient = rgba white overlay stacked on top of custom property bg */

.userBanner--primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #6366f1);
    border-radius: 3px;
}

.userBanner--accent {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #a855f7);
    border-radius: 3px;
}

.userBanner--red {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #ef4444);
    border-radius: 3px;
}

.userBanner--green {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #22c55e);
    border-radius: 3px;
}

.userBanner--olive {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #84cc16);
    color: var(--banner-fg, #1a2e00);
    border-radius: 3px;
}

.userBanner--lightGreen {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #34d399);
    color: var(--banner-fg, #064e3b);
    border-radius: 3px;
}

.userBanner--blue {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #3b82f6);
    border-radius: 3px;
}

.userBanner--royalBlue {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #4f46e5);
    border-radius: 3px;
}

.userBanner--skyBlue {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #0ea5e9);
    border-radius: 3px;
}

.userBanner--gray {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #6b7280);
    border-radius: 3px;
}

.userBanner--silver {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #94a3b8);
    color: var(--banner-fg, #1e293b);
    border-radius: 3px;
}

.userBanner--yellow {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #eab308);
    color: var(--banner-fg, #422006);
    border-radius: 3px;
}

.userBanner--orange {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2)), var(--banner-bg, #f97316);
    border-radius: 3px;
}

/* ─── Outlined / Pill Banners ─────────────────────────────── */

.userBanner--crimsonOutline {
    background: transparent;
    border: 2px solid var(--banner-bg, #8b2252);
    color: var(--banner-fg, #8b2252);
    border-radius: 20px;
    padding: 2px 14px;
}

.userBanner--crimsonSolid {
    background: var(--banner-bg, #7b2d3b);
    border-radius: 4px;
}

.userBanner--violetOutline {
    background: transparent;
    border: 2px solid var(--banner-bg, #6d28d9);
    color: var(--banner-fg, #6d28d9);
    border-radius: 20px;
    padding: 2px 14px;
}

.userBanner--violetSolid {
    background: var(--banner-bg, #5b21b6);
    border-radius: 4px;
}

.userBanner--aquaOutline {
    background: transparent;
    border: 2px solid var(--banner-bg, #0891b2);
    color: var(--banner-fg, #0891b2);
    border-radius: 20px;
    padding: 2px 14px;
}

/* ─── Deep Solid Banners ──────────────────────────────────── */

.userBanner--steelBlue {
    background: var(--banner-bg, #2563eb);
    border-radius: 4px;
}

.userBanner--navyBlue {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.12)), var(--banner-bg, #1e3a5f);
    border-radius: 4px;
}

.userBanner--deepTeal {
    background: var(--banner-bg, #0f766e);
    border-radius: 4px;
}

/* ─── Diagonal Stripe Banners ─────────────────────────────── */
/* Stripe = semi-transparent black overlay pattern on top of custom bg */

.userBanner--emeraldStripe {
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 8px,
            rgba(0, 0, 0, 0.18) 8px,
            rgba(0, 0, 0, 0.18) 16px),
        var(--banner-bg, #059669);
    border-radius: 4px;
}

.userBanner--tealStripe {
    background:
        repeating-linear-gradient(-55deg,
            transparent,
            transparent 8px,
            rgba(0, 0, 0, 0.18) 8px,
            rgba(0, 0, 0, 0.18) 16px),
        var(--banner-bg, #0d9488);
    border-radius: 4px;
}

/* ─── Warm & Dark Solids ──────────────────────────────────── */

.userBanner--amber {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)), var(--banner-bg, #b45309);
    border-radius: 4px;
}

.userBanner--orangeOutline {
    background: transparent;
    border: 2px solid var(--banner-bg, #ea580c);
    color: var(--banner-fg, #ea580c);
    border-radius: 20px;
    padding: 2px 14px;
}

.userBanner--tealSolid {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)), var(--banner-bg, #0d9488);
    border-radius: 4px;
}

.userBanner--charcoal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.08)), var(--banner-bg, #1e293b);
    border-radius: 4px;
}

/* ─── Custom banner colors ─────────────────────────────────── */
.userBanner--custom {
    background: var(--banner-bg, #6366f1);
    border-radius: 3px;
}