/**
 * BALAM AI - Atom Component Styles
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Styles for atom-level components (badge, avatar, spinner, status-dot,
 * stat-value, empty-state). All use BEM naming: .balam-{component}__{element}--{modifier}
 * All values reference design tokens — no hardcoded hex colors.
 */

/* ═══════════════════════════════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════════════════════════════ */

.balam-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--balam-space-1);
    padding: 0.2em 0.65em;
    font-size: var(--balam-text-xs);
    font-weight: var(--balam-font-semibold);
    border-radius: var(--balam-radius-full);
    white-space: nowrap;
    line-height: 1.4;
}

.balam-badge--primary   { background: rgba(var(--balam-primary-rgb), 0.15); color: var(--balam-primary); }
.balam-badge--secondary { background: rgba(var(--balam-secondary-rgb), 0.15); color: var(--balam-secondary); }
.balam-badge--success   { background: var(--balam-success-bg); color: var(--balam-success); }
.balam-badge--danger    { background: var(--balam-danger-bg); color: var(--balam-danger); }
.balam-badge--warning   { background: var(--balam-warning-bg); color: var(--balam-warning); }
.balam-badge--info      { background: var(--balam-info-bg); color: var(--balam-info); }
.balam-badge--muted     { background: var(--balam-border-light); color: var(--balam-text-muted); }

.balam-badge__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--balam-radius-full);
    background: currentColor;
}

/* ═══════════════════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════════════════ */

.balam-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--balam-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--balam-primary), var(--balam-secondary));
    color: var(--balam-white);
    font-weight: var(--balam-font-semibold);
}

.balam-avatar--xs { width: 24px; height: 24px; font-size: var(--balam-text-xs); }
.balam-avatar--sm { width: 32px; height: 32px; font-size: var(--balam-text-xs); }
.balam-avatar--md { width: 40px; height: 40px; font-size: var(--balam-text-sm); }
.balam-avatar--lg { width: 56px; height: 56px; font-size: var(--balam-text-base); }
.balam-avatar--xl { width: 80px; height: 80px; font-size: var(--balam-text-lg); }

.balam-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.balam-avatar__initials {
    line-height: 1;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════
   SPINNER
   ═══════════════════════════════════════════════════════════════════════ */

.balam-spinner {
    display: inline-block;
    border-radius: var(--balam-radius-full);
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-right-color: currentColor;
}

.balam-spinner--xs { width: 12px; height: 12px; border-width: 1.5px; }
.balam-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.balam-spinner--md { width: 28px; height: 28px; border-width: 3px; }
.balam-spinner--lg { width: 40px; height: 40px; border-width: 3px; }

/* ═══════════════════════════════════════════════════════════════════════
   STATUS DOT
   ═══════════════════════════════════════════════════════════════════════ */

.balam-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--balam-radius-full);
    flex-shrink: 0;
}

.balam-status-dot--active   { background: var(--balam-success); }
.balam-status-dot--inactive { background: var(--balam-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════
   STAT VALUE
   ═══════════════════════════════════════════════════════════════════════ */

.balam-stat-value {
    display: flex;
    flex-direction: column;
    gap: var(--balam-space-1);
}

.balam-stat-value__number {
    font-size: var(--balam-text-3xl);
    font-weight: var(--balam-font-bold);
    line-height: var(--balam-leading-none);
    color: var(--balam-text-primary);
}

.balam-stat-value__label {
    font-size: var(--balam-text-sm);
    color: var(--balam-text-muted);
}

.balam-stat-value__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--balam-space-1);
    font-size: var(--balam-text-xs);
    font-weight: var(--balam-font-semibold);
}

.balam-stat-value__trend--up   { color: var(--balam-success); }
.balam-stat-value__trend--down { color: var(--balam-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */

.balam-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--balam-space-4);
    padding: var(--balam-space-12) var(--balam-space-6);
    text-align: center;
}

.balam-empty-state__icon {
    opacity: 0.35;
}

.balam-empty-state__title {
    font-size: var(--balam-text-lg);
    font-weight: var(--balam-font-semibold);
    color: var(--balam-text-primary);
    margin: 0;
}

.balam-empty-state__message {
    font-size: var(--balam-text-sm);
    color: var(--balam-text-muted);
    margin: 0;
    max-width: 360px;
}

.balam-empty-state__action {
    margin-top: var(--balam-space-2);
}