/* ===========================================
   Badges & Tags  (v2 design language)

   Five canonical families (see docs/flows/FRONTEND_DESIGN_SYSTEM.md):
     1. Semantic  .badge .b-{action|positive|danger|warning|ai|info}   pill + dot
     2. Severity  .badge-state .sev-{low|medium|high|critical}         rounded rect
     3. State     .s-{muted|deleted|revoked|banned|ban-pending|...}    rounded rect
     4. Role      .role-{superuser|admin|mod|bot|none}
     5. Platform  .plat-{discord|telegram}                             fixed brand tones

   Incident severity, action tags, and user status all render through the
   severity_badge() / action_badge() / user_status_badge() macros in
   partials/_macros.html (no legacy .action-tag/.severity-badge/.status-badge aliases).
   All badge text is uppercased here (text-transform) — templates emit canonical lowercase.
   Token-only — no hardcoded colors. "Banned" and "critical" are the only solid fills.
   =========================================== */

/* Shared shape for every badge family */
.badge,
.positivity-badge,
.sentiment-badge,
.badge-small,
.msg-badge,
.badge-state,
.role-superuser, .role-admin, .role-mod, .role-bot, .role-none,
.plat-discord, .plat-telegram {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 8px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.1px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    text-transform: uppercase;
}

/* Semantic — pill + dot */
.badge { border-radius: var(--r-pill); padding: 0 10px; }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.b-action  { background: var(--c-secondary-ghost); color: var(--c-secondary-bold); }
.b-action  .badge-dot { background: var(--c-secondary); }
.b-positive{ background: var(--c-success-ghost);   color: var(--c-success-bold); }
.b-positive .badge-dot { background: var(--c-success); }
.b-danger  { background: var(--c-danger-ghost);    color: var(--c-danger-bold); }
.b-danger  .badge-dot { background: var(--c-danger); }
.b-warning { background: var(--c-warning-ghost);   color: var(--c-warning-bold); }
.b-warning .badge-dot { background: var(--c-warning); }
.b-ai      { background: var(--c-special-ghost);   color: var(--c-special-bold); }
.b-ai      .badge-dot { background: var(--c-special); }
.b-info    { background: var(--c-info-ghost);      color: var(--c-info-bold); }
.b-info    .badge-dot { background: var(--c-info); }

/* Severity — ramp from muted to solid danger */
.sev-low      { background: var(--c-muted-ghost);   color: var(--text-secondary); }
.sev-medium   { background: var(--c-warning-ghost); color: var(--c-warning-bold); }
.sev-high     { background: var(--c-danger-ghost);  color: var(--c-danger-bold); }
.sev-critical { background: var(--c-danger);        color: var(--c-text-on-dark); font-weight: 600; }

/* State — rounded rect, no dot. Banned = solid fill.
   Covers every moderation action_type so action tags route here via the
   action_badge() macro (see partials/_macros.html). */
.s-muted, .s-restricted { background: var(--c-warning-ghost); color: var(--c-warning-bold); }
.s-deleted, .s-kicked   { background: var(--c-danger-ghost);  color: var(--c-danger-bold); }
.s-warned               { background: var(--c-warning-ghost); color: var(--c-warning-bold); }
.s-revoked, .s-unmuted, .s-unbanned,
.s-ban-rejected, .s-unrestricted, .s-active { background: var(--c-success-ghost); color: var(--c-success-bold); }
.s-escalated { background: var(--c-primary-ghost); color: var(--c-primary-bold); }
.s-neutral { background: var(--surface-alt);     color: var(--text-secondary); }
.s-banned  { background: var(--c-danger);        color: var(--c-text-on-dark); font-weight: 600; }
.s-forgiven{ background: var(--c-success);       color: var(--c-text-on-dark); }
.s-expired { background: var(--c-muted-ghost);   color: var(--text-muted); }
/* Ban Pending — keep the striped (dashed) line surrounding it (TASK-291). */
.s-ban-pending {
    background: var(--c-warning-soft);
    color: var(--c-warning-dim);
    border: 1px dashed var(--c-warning-dim);
}

/* Role — superuser uses the brand (--c-primary) slot, not the AI slot */
.role-superuser { background: var(--c-primary-ghost);   color: var(--c-primary-bold); }
.role-admin     { background: var(--c-secondary-ghost); color: var(--c-secondary-bold); }
.role-mod       { background: var(--c-success-ghost);   color: var(--c-success-bold); }
.role-bot       { background: var(--c-muted-ghost);     color: var(--text-muted); }
.role-none      { background: var(--surface-alt);       color: var(--text-muted); }

/* Platform — fixed brand tones, never themed */
.plat-discord  { background: color-mix(in srgb, var(--platform-discord), transparent 85%);  color: var(--platform-discord); }
.plat-telegram { background: color-mix(in srgb, var(--platform-telegram), transparent 85%); color: var(--platform-telegram); }

/* ===========================================
   Legacy class names — mapped onto the design tokens
   =========================================== */

/* Variant badges */
.badge-success { background: var(--c-success-ghost); color: var(--c-success-bold); }
.badge-primary { background: var(--c-primary-ghost);  color: var(--c-primary-bold); }
.badge-warning { background: var(--c-warning-ghost); color: var(--c-warning-bold); }
.badge-danger  { background: var(--c-danger-ghost);  color: var(--c-danger-bold); }

/* Role badges (legacy) */
.badge.admin     { background: var(--c-secondary-ghost); color: var(--c-secondary-bold); }
.badge.superuser { background: var(--c-primary-ghost);   color: var(--c-primary-bold); }
.badge.moderator { background: var(--c-success-ghost);   color: var(--c-success-bold); }
.badge.enabled   { background: var(--c-success-ghost);   color: var(--c-success-bold); }
.badge.disabled  { background: var(--surface-alt);       color: var(--text-muted); }
.badge.purple    { background: var(--c-special-ghost);   color: var(--c-special-bold); }

/* Action tags, incident severity, and user status now render via the v2 State /
   Severity families (.badge-state .s-* / .sev-*) through the action_badge() and
   severity_badge() macros in partials/_macros.html — no legacy alias classes. */

/* Positivity */
.positivity-badge.positive { background: var(--c-success-ghost); color: var(--c-success-bold); }
.positivity-badge.negative { background: var(--c-danger-ghost); color: var(--c-danger-bold); }
.positivity-badge.neutral  { background: var(--c-muted-ghost); color: var(--text-secondary); }

/* Sentiment */
.sentiment-badge.question    { background: var(--c-info-ghost); color: var(--c-info-bold); }
.sentiment-badge.explanation { background: var(--c-success-ghost); color: var(--c-success-bold); }
.sentiment-badge.technical   { background: var(--c-info-ghost); color: var(--c-info-bold); }
.sentiment-badge.social      { background: var(--c-muted-ghost); color: var(--text-secondary); }
.sentiment-badge.meme        { background: var(--c-primary-ghost); color: var(--c-primary-bold); }
.sentiment-badge.swearing    { background: var(--c-secondary-ghost); color: var(--c-secondary-bold); }
.sentiment-badge.high-risk   { background: var(--c-danger-ghost); color: var(--c-danger-bold); }

/* Small badges */
.badge-small.question  { background: var(--c-info-ghost); color: var(--c-info-bold); }
.badge-small.swearing  { background: var(--c-secondary-ghost); color: var(--c-secondary-bold); }
.badge-small.high-risk { background: var(--c-danger-ghost); color: var(--c-danger-bold); }

/* Active badge */
.active-badge { border-radius: var(--r-pill); padding: 0 10px; }
.active-badge.active   { background: var(--c-success-ghost); color: var(--c-success-bold); }
.active-badge.inactive { background: var(--c-danger-ghost); color: var(--c-danger-bold); }

/* Message badges */
.msg-badge { text-decoration: none; }
.msg-badge.deleted { background: var(--c-danger-ghost); color: var(--c-danger-bold); }
.msg-badge.incident {
    background: var(--c-warning-ghost);
    color: var(--c-warning-bold);
    cursor: pointer;
}
.msg-badge.incident:hover { background: var(--c-warning-soft); }
.msg-badge.incident .incident-icon { width: 14px; height: 14px; color: var(--c-warning-bold); }
.msg-badge.positive { background: var(--c-success-ghost); color: var(--c-success-bold); }
.msg-badge.negative { background: var(--c-danger-ghost); color: var(--c-danger-bold); }
.msg-badge.neutral  { background: var(--c-muted-ghost); color: var(--text-secondary); }

/* Widget badges — kept compact for the floating chat widget */
.widget-msg-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.55rem;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 500;
    text-transform: uppercase;
}
.widget-msg-badge.deleted  { background: var(--c-danger-ghost); color: var(--c-danger-bold); }
.widget-msg-badge.incident { background: var(--c-warning-ghost); color: var(--c-warning-bold); }