/**
 * HeuriSight Badge System
 * Based on: mockups/apple-redesign/05-assessment-detail.html
 * 
 * Usage:
 *   <span class="hs-badge hs-badge--success">Active</span>
 *   <span class="hs-badge hs-badge--warning">At Risk</span>
 *   <span class="hs-badge hs-badge--danger">Failed</span>
 */

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

.hs-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--bg-tertiary, #F5F5F7);
    color: var(--text-secondary, #6E6E73);
}

/* =============================================================================
   BADGE VARIANTS
   ============================================================================= */

/* Success - Green */
.hs-badge--success {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

/* Warning - Orange/Amber */
.hs-badge--warning {
    background: var(--warning-subtle, rgba(255, 149, 0, 0.12));
    color: var(--warning, #FF9500);
}

/* Danger - Red */
.hs-badge--danger {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.12));
    color: var(--destructive, #FF3B30);
}

/* Info - Blue */
.hs-badge--info {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

/* Purple - AI/Special */
.hs-badge--purple {
    background: var(--purple-subtle, rgba(175, 82, 222, 0.12));
    color: var(--purple, #AF52DE);
}

/* Neutral - Gray */
.hs-badge--neutral {
    background: var(--bg-tertiary, #F5F5F7);
    color: var(--text-secondary, #6E6E73);
}

/* =============================================================================
   BADGE SIZES
   ============================================================================= */

/* Large badge */
.hs-badge--lg {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
}

/* =============================================================================
   BADGE WITH DOT INDICATOR
   ============================================================================= */

.hs-badge--dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* =============================================================================
   STATUS BADGES (specific use cases)
   ============================================================================= */

/* Assessment Status */
.hs-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
}

.hs-status--active {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

.hs-status--draft {
    background: var(--warning-subtle, rgba(255, 149, 0, 0.12));
    color: var(--warning, #FF9500);
}

.hs-status--retired {
    background: var(--bg-tertiary, #F5F5F7);
    color: var(--text-tertiary, #86868B);
}

.hs-status--processing {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

/* =============================================================================
   SCORE LEVEL BADGES
   ============================================================================= */

.hs-level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--space-2, 8px);
    border-radius: var(--radius-sm, 6px);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: #FFFFFF;
}

.hs-level--5 { background: var(--level-5, #AF52DE); }
.hs-level--4 { background: var(--level-4, #34C759); }
.hs-level--3 { background: var(--level-3, #0071E3); }
.hs-level--2 { background: var(--level-2, #FF9500); }
.hs-level--1 { background: var(--level-1, #FF3B30); }

/* =============================================================================
   ROLE BADGES
   ============================================================================= */

.hs-role-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.hs-role-badge--lf {
    background: var(--purple-subtle, rgba(175, 82, 222, 0.12));
    color: var(--purple, #AF52DE);
}

.hs-role-badge--instructor {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.hs-role-badge--student {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

/* =============================================================================
   COUNT BADGE (for notifications)
   ============================================================================= */

.hs-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1, 4px);
    border-radius: var(--radius-full, 9999px);
    font-size: 10px;
    font-weight: 600;
    background: var(--destructive, #FF3B30);
    color: #FFFFFF;
}

.hs-count-badge--muted {
    background: var(--text-tertiary, #86868B);
}

/* =============================================================================
   DARK THEME
   ============================================================================= */

[data-theme="dark"] .hs-badge--neutral,
[data-theme="dark"] .hs-status--retired {
    background: var(--bg-tertiary, #3A3A3C);
    color: var(--text-secondary, #86868B);
}