/*
 * AIM Badge & Status Indicator System
 * Created: March 26, 2026
 * Location: AIM.Shared.UI — used by all components showing status
 *
 * Replaces hardcoded RAG colours (#28a745, #ffc107, #dc3545) across 50+ files.
 * All colours use design tokens with fallbacks.
 *
 * Usage:
 *   <span class="aim-badge aim-badge--success">Active</span>
 *   <span class="aim-dot aim-dot--danger"></span>
 *   <span class="aim-pill aim-pill--warning">Overdue</span>
 */

/* ==========================================================================
 * BADGE — text label with background colour
 * ========================================================================== */

.aim-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.aim-badge--success {
    background: var(--color-success-lightest);
    color: var(--color-success-dark);
}

.aim-badge--warning {
    background: var(--color-warning-lightest);
    color: var(--color-warning-dark);
}

.aim-badge--danger {
    background: var(--color-danger-lightest);
    color: var(--color-danger-dark);
}

.aim-badge--info {
    background: var(--color-info-lightest);
    color: var(--color-info-dark);
}

.aim-badge--primary {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
}

.aim-badge--neutral {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

.aim-badge--dark {
    background: var(--color-neutral-dark);
    color: var(--surface-raised);
}

/* Small variant — for count badges */
.aim-badge--sm {
    padding: 1px 6px;
    font-size: 0.7rem;
}

/* ==========================================================================
 * DOT — small colour indicator (14×14 or 10×10)
 * ========================================================================== */

.aim-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.aim-dot--sm {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.aim-dot--success { background: var(--color-success-medium); }
.aim-dot--warning { background: var(--color-warning-medium); }
.aim-dot--danger  { background: var(--color-danger-medium); }
.aim-dot--info    { background: var(--color-info-medium); }
.aim-dot--primary { background: var(--color-primary); }
.aim-dot--neutral { background: var(--color-neutral-light); }

/* ==========================================================================
 * PILL — rounded full-width status indicator
 * ========================================================================== */

.aim-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
}

.aim-pill--success {
    background: var(--color-success-lightest);
    color: var(--color-success-dark);
}

.aim-pill--warning {
    background: var(--color-warning-lightest);
    color: var(--color-warning-dark);
}

.aim-pill--danger {
    background: var(--color-danger-lightest);
    color: var(--color-danger-dark);
}

.aim-pill--info {
    background: var(--color-info-lightest);
    color: var(--color-info-dark);
}

.aim-pill--primary {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
}

.aim-pill--neutral {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

/* ==========================================================================
 * LEGEND — horizontal row of dot + label pairs
 * ========================================================================== */

.aim-legend {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.aim-legend__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.aim-legend__label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* ==========================================================================
 * COUNT BADGE — small number in corner (e.g., notification count)
 * ========================================================================== */

.aim-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    background: var(--color-primary);
    color: var(--surface-raised);
}

/* ==========================================================================
 * PRINT — preserve badge colours
 * ========================================================================== */

@media print {
    .aim-badge,
    .aim-dot,
    .aim-pill {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}