/* ===========================================================================
   v2/badges.css — status / label PILL. A generic primitive (no app concepts).
   Two styles via the .page.dark / .page.light ancestor, like the rest of v2.
   The app maps its own domain -> a variant (e.g. ticket "Resolved" -> .ok).
   Palette mirrors the v2 table status colours (.ok / .warn / .bad).
   =========================================================================== */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .2px;
    white-space: nowrap;
}

/* neutral default */
.page.dark  .badge { background: #3a3a3a; color: #d8d8d8; }
.page.light .badge { background: #e9e9e9; color: #444444; }

/* semantic variants (filled pills) — same hues as .ok/.warn/.bad/info */
.page.dark  .badge.ok   { background: #1f3d24; color: #5fd06a; }
.page.dark  .badge.warn { background: #3d3115; color: #ffb454; }
.page.dark  .badge.bad  { background: #3d1d1d; color: #ff5a5a; }
.page.dark  .badge.info { background: #16314d; color: #5aa9ff; }

.page.light .badge.ok   { background: #e2f3e4; color: #2f8a36; }
.page.light .badge.warn { background: #f6ecd9; color: #b9700b; }
.page.light .badge.bad  { background: #f7e0e0; color: #c62f2f; }
.page.light .badge.info { background: #e0ecf7; color: #1f6fb2; }