/**
 * Badge Component System
 *
 * Standardized badge and counter styles using CSS variables.
 * Replaces 6 different badge types with unified system.
 *
 * Usage:
 *   <span class="badge">Default</span>
 *   <span class="badge badge-success">Success</span>
 *   <span class="badge-counter">5</span>
 */

/* ========================================
   BADGE VARIABLES
======================================== */

:root {
    /* Badge sizing - Aliases to global design tokens */
    --badge-padding: var(--spacing-xs) var(--spacing-sm);        /* 4px 8px */
    --badge-padding-sm: 2px var(--spacing-xs);                   /* 2px 4px */
    --badge-padding-lg: var(--spacing-xs) var(--spacing-md);     /* 4px 12px */

    --badge-font-size: var(--text-xs);    /* 11px */
    --badge-font-size-sm: 10px;
    --badge-font-size-lg: var(--text-sm); /* 13px */

    --badge-font-weight: var(--font-semibold); /* 600 */
    --badge-line-height: var(--leading-tight); /* 1.2 */

    --badge-radius: var(--radius-xl);        /* 12px - Pill-shaped */
    --badge-radius-square: var(--radius-sm); /* 4px */

    /* Counter badge specific */
    --badge-counter-size: var(--spacing-lg);  /* 16px */
    --badge-counter-font-size: 10px;
}

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

.badge {
    /* Sizing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--badge-padding);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-line-height);
    gap: 4px;

    /* Styling */
    border-radius: var(--badge-radius);
    background: var(--theme-badge-bg);
    color: var(--theme-badge-color);

    /* Behavior */
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

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

.badge-sm {
    padding: var(--badge-padding-sm);
    font-size: var(--badge-font-size-sm);
}

.badge-lg {
    padding: var(--badge-padding-lg);
    font-size: var(--badge-font-size-lg);
}

/* ========================================
   COLOR/STATUS VARIANTS
======================================== */

/* Success Badge (green) */
.badge-success {
    background: var(--theme-badge-success-bg);
    color: var(--theme-badge-success-color);
}

/* Warning Badge (amber/orange) */
.badge-warning {
    background: var(--theme-badge-warning-bg);
    color: var(--theme-badge-warning-color);
}

/* Danger Badge (red) */
.badge-danger {
    background: var(--theme-badge-danger-bg);
    color: var(--theme-badge-danger-color);
}

/* Info Badge (blue) */
.badge-info {
    background: var(--theme-badge-info-bg);
    color: var(--theme-badge-info-color);
}

/* Primary Badge (brand color) */
.badge-primary {
    background: var(--theme-btn-primary-bg);
    color: var(--theme-btn-primary-color);
}

/* Secondary Badge (gray/muted) */
.badge-secondary {
    background: var(--theme-badge-bg);
    color: var(--theme-badge-color);
}

/* ========================================
   COUNTER BADGES (Navigation)
======================================== */

.badge-counter,
.tab-counter {
    /* Sizing */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--badge-counter-size);
    height: var(--badge-counter-size);
    padding: 0 5px;
    font-size: var(--badge-counter-font-size);
    font-weight: var(--badge-font-weight);
    line-height: var(--badge-counter-size);
    text-align: center;

    /* Styling */
    border-radius: var(--radius-full, 9999px);
    background: var(--theme-counter-unread-bg);
    color: var(--theme-counter-unread-color);
    text-decoration: none !important;

    /* Positioning (when used inline) */
    margin-left: 0px;
    vertical-align: middle;

    /* Animation */
    transition: all 0.2s ease;
}

/* Hidden counter (default state) */
.badge-counter.hidden,
.tab-counter[style*="hidden"],
.tab-counter[style*="opacity: 0"] {
    visibility: hidden;
    opacity: 0;
}

/* Total counter (gray/neutral) */
.badge-counter.total,
.tab-counter.total {
    background: var(--theme-counter-total-bg);
    color: var(--theme-counter-total-color);
}

/* Unread counter (red/danger) */
.badge-counter.unread,
.tab-counter.unread {
    background: var(--theme-counter-unread-bg);
    color: var(--theme-counter-unread-color);
}

/* ========================================
   SPECIAL BADGE STYLES
======================================== */

/* Outlined Badge */
.badge-outlined {
    background: transparent;
    border: 1px solid currentColor;
}

.badge-outlined.badge-success {
    color: var(--theme-badge-success-bg);
}

.badge-outlined.badge-danger {
    color: var(--theme-badge-danger-bg);
}

.badge-outlined.badge-warning {
    color: var(--theme-badge-warning-bg);
}

.badge-outlined.badge-info {
    color: var(--theme-badge-info-bg);
}

/* Dot Badge (just a colored dot) */
.badge-dot {
    padding: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Square Badge */
.badge-square {
    border-radius: var(--badge-radius-square);
}

/* Pill Badge (default is already pill-shaped) */
.badge-pill {
    border-radius: var(--badge-radius);
}

/* ========================================
   BADGE WITH ICON
======================================== */

.badge-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.badge-icon svg,
.badge-icon .icon {
    width: 12px;
    height: 12px;
}

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

.badge-group {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* ========================================
   LEGACY CLASS MAPPINGS (Temporary)
======================================== */

/* Stat Label (admin stats) */
.stat-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--badge-font-size-lg);
    font-weight: var(--badge-font-weight);
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon {
    font-size: 14px;
}

/* Duplicate .setting-label removed - definition in admin.css:46 (admin-specific) */

/* Referral Discount Label */
.referral-discount-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--theme-text-secondary);
}

/* ========================================
   POSITIONING UTILITIES
======================================== */

/* Badge positioned in top-right corner */
.badge-absolute {
    position: absolute;
    top: -8px;
    right: -8px;
}

/* Badge positioned inline */
.badge-inline {
    margin-left: 8px;
}

/* ========================================
   ANIMATION UTILITIES
======================================== */

/* Pulse animation for notifications */
@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.badge-pulse {
    animation: badge-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Ping animation (growing circle) */
@keyframes badge-ping {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.badge-ping {
    position: relative;
}

.badge-ping::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: inherit;
    animation: badge-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ========================================
   ROLE BADGES (User Roles)
   ========================================
   Unified styling for all role badges across the site.
   Used in: forum posts, profiles, leaderboard, admin user list

   Classes: .role-badge, .forum-post-badge, .user-role-badge
   Modifiers: .admin, .support, .user, .sales, .social, .location
======================================== */

/* Base role badge styling */
.role-badge,
.forum-post-badge,
.user-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

/* Admin role - Red */
.role-badge.admin,
.forum-post-badge.admin,
.user-role-badge.admin {
    background: var(--color-red-600);
    color: white;
}

/* Support role - Yellow */
.role-badge.support,
.forum-post-badge.support,
.user-role-badge.support {
    background: var(--color-yellow-500);
    color: var(--color-brown-700);
}

/* User/Member role - Gray with border */
.role-badge.user,
.forum-post-badge.user,
.user-role-badge.user {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-300);
}

/* Sales role - Gray with border */
.role-badge.sales,
.forum-post-badge.sales,
.user-role-badge.sales {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-300);
}

/* Social role - Gray with border */
.role-badge.social,
.forum-post-badge.social,
.user-role-badge.social {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-300);
}

/* Location role - Gray with border */
.role-badge.location,
.forum-post-badge.location,
.user-role-badge.location {
    background: var(--color-gray-200);
    color: var(--color-gray-900);
    border: 1px solid var(--color-gray-300);
}

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

@media (max-width: 768px) {
    .badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .badge-counter,
    .tab-counter {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        padding: 2px 5px;
    }

    .badge-lg {
        font-size: 12px;
        padding: 5px 10px;
    }
}