/* =========================================================
   KZ2 shared components — badge / conf-badge / empty-state,
   extracted from assets.html, dashboard.html, and emergency.html.

   These three were NOT identical copies — reconciled into one
   canonical version below, noted where they diverged:

   - conf-badge: assets.html styled it as plain colored text;
     dashboard.html/emergency.html styled it as a filled pill
     (matching .badge's own pill treatment). Kept the pill style
     here since two of three files agreed and it reads more
     consistently next to .badge.
   - badge-archived: only existed in assets.html (the other two
     files never render an archived asset). Kept — asset_status
     can be 'archived' anywhere this badge might be reused.
   - empty-state: assets.html centered the text with 40px/20px
     padding; dashboard.html/emergency.html left-aligned it with
     16px/0. Kept the centered version — reads better as a
     standalone empty-state message on a page with no other
     content to align against.
   ========================================================= */

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* KZ2 F3: healthy/attention_needed/archived fg values measured 4.42/3.77/3.78:1
   on their own bg -- all fail 4.5:1. Darkened just enough to clear it, kept
   in sync with style.css's --success-fg/--warning-fg. */
.badge-healthy          { background: #e3f3e6; color: #2d793d; }
.badge-attention_needed { background: #fff2d9; color: #946309; }
.badge-overdue          { background: #fbe0dd; color: #b13a2a; }
.badge-archived         { background: #ece9e3; color: #6b675f; }

.conf-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--kz2-warm-gray);
  color: var(--kz2-muted);
}

.conf-verified_recently { background: #e3f3e6; color: #2d793d; }
.conf-verified_long_ago  { background: #fff2d9; color: #946309; }
.conf-never_verified     { background: #fbe0dd; color: #b13a2a; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--kz2-muted);
  font-size: var(--kz2-font-base, 0.88rem);
}