/* ============================================
   RSL Badge Component
   Version: 1.0.0
   Description: Comprehensive badge system with multiple variants,
   sizes, shapes, animations, and interactive features.
   Designed for JSON API V2 compatibility.
   ============================================ */

/* ============================================
   BASE BADGE STYLES
   ============================================ */

.rsl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.35em 0.75em;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px; /* pill shape by default */
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: default;
    font-family: inherit;
}

.rsl-badge i,
.rsl-badge svg {
    font-size: 0.85em;
    width: 1em;
    height: 1em;
}

/* ============================================
   COLOR VARIANTS - SOLID (Default)
   ============================================ */

/* Primary */
.rsl-badge-primary,
.rsl-badge[data-variant="primary"] {
    background: linear-gradient(135deg, #6E7BFF 0%, #5a67d8 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(110, 123, 255, 0.25);
}

/* Secondary */
.rsl-badge-secondary,
.rsl-badge[data-variant="secondary"] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.25);
}

/* Success */
.rsl-badge-success,
.rsl-badge[data-variant="success"] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.25);
}

/* Warning */
.rsl-badge-warning,
.rsl-badge[data-variant="warning"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25);
}

/* Danger */
.rsl-badge-danger,
.rsl-badge[data-variant="danger"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25);
}

/* Info */
.rsl-badge-info,
.rsl-badge[data-variant="info"] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.25);
}

/* Light */
.rsl-badge-light,
.rsl-badge[data-variant="light"] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #334155;
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Dark */
.rsl-badge-dark,
.rsl-badge[data-variant="dark"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #f1f5f9;
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* ============================================
   OUTLINE STYLE VARIANTS
   ============================================ */

.rsl-badge-outline,
.rsl-badge[data-style="outline"] {
    background: transparent;
    box-shadow: none;
}

.rsl-badge-outline.rsl-badge-primary,
.rsl-badge[data-style="outline"][data-variant="primary"] {
    background: transparent;
    color: #6E7BFF;
    border-color: #6E7BFF;
}

.rsl-badge-outline.rsl-badge-secondary,
.rsl-badge[data-style="outline"][data-variant="secondary"] {
    background: transparent;
    color: #64748b;
    border-color: #64748b;
}

.rsl-badge-outline.rsl-badge-success,
.rsl-badge[data-style="outline"][data-variant="success"] {
    background: transparent;
    color: #22c55e;
    border-color: #22c55e;
}

.rsl-badge-outline.rsl-badge-warning,
.rsl-badge[data-style="outline"][data-variant="warning"] {
    background: transparent;
    color: #f59e0b;
    border-color: #f59e0b;
}

.rsl-badge-outline.rsl-badge-danger,
.rsl-badge[data-style="outline"][data-variant="danger"] {
    background: transparent;
    color: #ef4444;
    border-color: #ef4444;
}

.rsl-badge-outline.rsl-badge-info,
.rsl-badge[data-style="outline"][data-variant="info"] {
    background: transparent;
    color: #06b6d4;
    border-color: #06b6d4;
}

/* ============================================
   SUBTLE/SOFT STYLE VARIANTS
   ============================================ */

.rsl-badge-subtle,
.rsl-badge[data-style="subtle"] {
    box-shadow: none;
}

.rsl-badge-subtle.rsl-badge-primary,
.rsl-badge[data-style="subtle"][data-variant="primary"] {
    background: rgba(110, 123, 255, 0.15);
    color: #5a67d8;
    border-color: rgba(110, 123, 255, 0.25);
}

.rsl-badge-subtle.rsl-badge-secondary,
.rsl-badge[data-style="subtle"][data-variant="secondary"] {
    background: rgba(100, 116, 139, 0.15);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.25);
}

.rsl-badge-subtle.rsl-badge-success,
.rsl-badge[data-style="subtle"][data-variant="success"] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    border-color: rgba(34, 197, 94, 0.25);
}

.rsl-badge-subtle.rsl-badge-warning,
.rsl-badge[data-style="subtle"][data-variant="warning"] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
}

.rsl-badge-subtle.rsl-badge-danger,
.rsl-badge[data-style="subtle"][data-variant="danger"] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.25);
}

.rsl-badge-subtle.rsl-badge-info,
.rsl-badge[data-style="subtle"][data-variant="info"] {
    background: rgba(6, 182, 212, 0.15);
    color: #0891b2;
    border-color: rgba(6, 182, 212, 0.25);
}

/* ============================================
   GLASS/FROSTED STYLE
   ============================================ */

.rsl-badge-glass,
.rsl-badge[data-style="glass"] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

/* Extra Small */
.rsl-badge-xs,
.rsl-badge[data-size="xs"] {
    padding: 0.2em 0.45em;
    font-size: 0.625rem;
}

/* Small */
.rsl-badge-sm,
.rsl-badge[data-size="sm"] {
    padding: 0.25em 0.55em;
    font-size: 0.7rem;
}

/* Medium (default) - no extra class needed */

/* Large */
.rsl-badge-lg,
.rsl-badge[data-size="lg"] {
    padding: 0.45em 0.9em;
    font-size: 0.875rem;
}

/* Extra Large */
.rsl-badge-xl,
.rsl-badge[data-size="xl"] {
    padding: 0.55em 1.1em;
    font-size: 1rem;
}

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

/* Pill (default) - already set in base */

/* Rounded */
.rsl-badge-rounded,
.rsl-badge[data-shape="rounded"] {
    border-radius: 0.375rem;
}

/* Square */
.rsl-badge-square,
.rsl-badge[data-shape="square"] {
    border-radius: 0;
}

/* Circle (for single character/icon) */
.rsl-badge-circle,
.rsl-badge[data-shape="circle"] {
    border-radius: 50%;
    padding: 0.5em;
    width: 2em;
    height: 2em;
}

/* ============================================
   DOT INDICATOR BADGES
   ============================================ */

.rsl-badge-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    padding: 0;
    border-radius: 50%;
    border: none;
}

.rsl-badge-dot.rsl-badge-primary { background: #6E7BFF; }
.rsl-badge-dot.rsl-badge-success { background: #22c55e; }
.rsl-badge-dot.rsl-badge-warning { background: #f59e0b; }
.rsl-badge-dot.rsl-badge-danger { background: #ef4444; }
.rsl-badge-dot.rsl-badge-info { background: #06b6d4; }

.rsl-badge-dot-lg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   STATUS BADGES WITH PULSE ANIMATION
   ============================================ */

.rsl-badge-status {
    position: relative;
}

.rsl-badge-status::before {
    content: '';
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}

.rsl-badge-status {
    padding-left: 1.5em;
}

/* Pulse Animation */
.rsl-badge-pulse::after,
.rsl-badge[data-animate="pulse"]::after {
    content: '';
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
    animation: rsl-badge-pulse 2s ease-in-out infinite;
}

@keyframes rsl-badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-50%) scale(1.5);
    }
}

/* Status + Pulse combination: animate the status dot instead of adding another */
.rsl-badge-status.rsl-badge-pulse::after {
    display: none;
}

.rsl-badge-status.rsl-badge-pulse::before {
    animation: rsl-badge-pulse 2s ease-in-out infinite;
}

/* Online Status */
.rsl-badge-online {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
}

.rsl-badge-online::before {
    background: #ffffff;
}

/* Offline Status */
.rsl-badge-offline {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    color: #ffffff;
}

/* Away Status */
.rsl-badge-away {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
}

/* Busy Status */
.rsl-badge-busy {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}

/* ============================================
   COUNTER/NOTIFICATION BADGES
   ============================================ */

.rsl-badge-counter {
    min-width: 1.5em;
    padding: 0.25em 0.5em;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

/* For large numbers */
.rsl-badge-counter-max::after {
    content: '+';
}

/* ============================================
   POSITIONED BADGES (for avatars, icons, etc.)
   ============================================ */

.rsl-badge-wrapper {
    position: relative;
    display: inline-flex;
}

.rsl-badge-positioned {
    position: absolute;
    z-index: 1;
}

/* Top Right (default for counters) */
.rsl-badge-top-right,
.rsl-badge-positioned[data-position="top-right"] {
    top: -0.5em;
    right: -0.5em;
}

/* Top Left */
.rsl-badge-top-left,
.rsl-badge-positioned[data-position="top-left"] {
    top: -0.5em;
    left: -0.5em;
}

/* Bottom Right */
.rsl-badge-bottom-right,
.rsl-badge-positioned[data-position="bottom-right"] {
    bottom: -0.25em;
    right: -0.25em;
}

/* Bottom Left */
.rsl-badge-bottom-left,
.rsl-badge-positioned[data-position="bottom-left"] {
    bottom: -0.25em;
    left: -0.25em;
}

/* ============================================
   DISMISSIBLE BADGES
   ============================================ */

.rsl-badge-dismissible {
    padding-right: 1.75em;
    position: relative;
}

.rsl-badge-dismiss {
    position: absolute;
    right: 0.35em;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    padding: 0;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 50%;
    color: inherit;
    font-size: 0.75em;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    line-height: 1;
}

.rsl-badge-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.25);
}

.rsl-badge-dismiss:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

/* ============================================
   INTERACTIVE/CLICKABLE BADGES
   ============================================ */

.rsl-badge-clickable,
.rsl-badge[data-clickable="true"],
a.rsl-badge,
button.rsl-badge {
    cursor: pointer;
}

.rsl-badge-clickable:hover,
.rsl-badge[data-clickable="true"]:hover,
a.rsl-badge:hover,
button.rsl-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.rsl-badge-clickable:active,
.rsl-badge[data-clickable="true"]:active,
a.rsl-badge:active,
button.rsl-badge:active {
    transform: translateY(0);
}

.rsl-badge-clickable:focus,
.rsl-badge[data-clickable="true"]:focus,
a.rsl-badge:focus,
button.rsl-badge:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ============================================
   BADGE GROUPS
   ============================================ */

.rsl-badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Connected badge group */
.rsl-badge-group-connected {
    gap: 0;
}

.rsl-badge-group-connected .rsl-badge {
    border-radius: 0;
}

.rsl-badge-group-connected .rsl-badge:first-child {
    border-radius: 9999px 0 0 9999px;
}

.rsl-badge-group-connected .rsl-badge:last-child {
    border-radius: 0 9999px 9999px 0;
}

.rsl-badge-group-connected .rsl-badge:only-child {
    border-radius: 9999px;
}

/* Stacked badge group (overlapping) */
.rsl-badge-group-stacked {
    gap: 0;
}

.rsl-badge-group-stacked .rsl-badge {
    margin-left: -0.5em;
    box-shadow: 0 0 0 2px var(--rsl-bg-primary, #ffffff);
}

.rsl-badge-group-stacked .rsl-badge:first-child {
    margin-left: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Bounce */
.rsl-badge-bounce,
.rsl-badge[data-animate="bounce"] {
    animation: rsl-badge-bounce 1s ease infinite;
}

@keyframes rsl-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Shimmer */
.rsl-badge-shimmer,
.rsl-badge[data-animate="shimmer"] {
    position: relative;
    overflow: hidden;
}

.rsl-badge-shimmer::after,
.rsl-badge[data-animate="shimmer"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: rsl-badge-shimmer 2s infinite;
}

@keyframes rsl-badge-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Glow */
.rsl-badge-glow,
.rsl-badge[data-animate="glow"] {
    animation: rsl-badge-glow 2s ease-in-out infinite alternate;
}

@keyframes rsl-badge-glow {
    from {
        box-shadow: 0 0 5px currentColor, 0 0 10px currentColor;
    }
    to {
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    }
}

/* ============================================
   ICON-ONLY BADGES
   ============================================ */

.rsl-badge-icon-only {
    padding: 0.5em;
    width: 2em;
    height: 2em;
}

.rsl-badge-icon-only i,
.rsl-badge-icon-only svg {
    font-size: 1em;
}

/* ============================================
   GRADIENT STYLE VARIANTS
   ============================================ */

.rsl-badge-gradient-rainbow {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    color: #ffffff;
}

.rsl-badge-gradient-sunset {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #f59e0b 100%);
    color: #ffffff;
}

.rsl-badge-gradient-ocean {
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    color: #ffffff;
}

.rsl-badge-gradient-forest {
    background: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);
    color: #ffffff;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .rsl-badge-light,
[data-theme="dark"] .rsl-badge[data-variant="light"] {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    color: #e2e8f0;
    border-color: #475569;
}

[data-theme="dark"] .rsl-badge-subtle.rsl-badge-primary,
[data-theme="dark"] .rsl-badge[data-style="subtle"][data-variant="primary"] {
    background: rgba(110, 123, 255, 0.2);
    color: #a5b4fc;
}

[data-theme="dark"] .rsl-badge-subtle.rsl-badge-success,
[data-theme="dark"] .rsl-badge[data-style="subtle"][data-variant="success"] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-theme="dark"] .rsl-badge-subtle.rsl-badge-warning,
[data-theme="dark"] .rsl-badge[data-style="subtle"][data-variant="warning"] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .rsl-badge-subtle.rsl-badge-danger,
[data-theme="dark"] .rsl-badge[data-style="subtle"][data-variant="danger"] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .rsl-badge-subtle.rsl-badge-info,
[data-theme="dark"] .rsl-badge[data-style="subtle"][data-variant="info"] {
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
}

[data-theme="dark"] .rsl-badge-group-stacked .rsl-badge {
    box-shadow: 0 0 0 2px var(--rsl-dark-bg-primary, #1a1a1a);
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .rsl-badge,
    .rsl-badge-pulse::after,
    .rsl-badge[data-animate]::after,
    .rsl-badge-bounce,
    .rsl-badge-shimmer::after,
    .rsl-badge-glow {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
    .rsl-badge-group {
        gap: 0.375rem;
    }

    .rsl-badge-lg,
    .rsl-badge[data-size="lg"] {
        font-size: 0.8rem;
    }

    .rsl-badge-xl,
    .rsl-badge[data-size="xl"] {
        font-size: 0.875rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .rsl-badge {
        border: 1px solid currentColor !important;
        box-shadow: none !important;
    }

    .rsl-badge-dismiss {
        display: none;
    }
}