/* CertManager design tokens and the small component layer (UI audit: D/E/F).

   Loaded after vendor Bootstrap, so a rule here wins over a Bootstrap rule of
   equal specificity.  CSP is `style-src 'self'` — no inline styles anywhere:
   every visual tweak is a class or a custom property defined in this file. */

:root {
  /* Status palette.  Dark surface + light text keeps the contrast far above the
     4.5:1 requirement in **both** themes (measured: ok 7.21:1, warn 7.21:1,
     bad 7.08:1, info 7.65:1, mute 9.70:1).  Bootstrap's own `text-bg-*` badges
     gave as little as 4.53:1 (white on #198754). */
  --cm-ok-bg: #0f5132;
  --cm-ok: #d1e7dd;
  --cm-warn-bg: #664d03;
  --cm-warn: #fff3cd;
  --cm-bad-bg: #842029;
  --cm-bad: #f8d7da;
  --cm-info-bg: #055160;
  --cm-info: #cff4fc;
  --cm-mute-bg: #343a40;
  --cm-mute: #e9ecef;

  --cm-radius: 0.375rem;
  --cm-sp-1: 0.25rem;
  --cm-sp-2: 0.5rem;
  --cm-sp-3: 1rem;

  --cm-fs-mono: 0.8125rem; /* 13px — machine data (fingerprints, run ids) */
  --cm-fs-meta: 0.8125rem; /* 13px — secondary metadata */
  --cm-fs-badge: 0.75rem; /* 12px — was 10.5px with Bootstrap's .badge */
}

/* D: one status badge.  `text-bg-*` stays in the markup (Bootstrap semantics and
   render tests rely on it); the variant attribute carries the same name and
   repaints the badge from the tokens above. */
.badge.cm-status {
  border: 1px solid transparent;
  border-radius: var(--cm-radius);
  padding: var(--cm-sp-1) var(--cm-sp-2);
  font-size: var(--cm-fs-badge);
  font-weight: 600;
}

/* Bootstrap ships `text-bg-*` with `!important` (it is a utility), so the token
   colours carry `!important` as well — the class stays in the markup by contract
   (render tests and Bootstrap semantics), while these rules paint the badge. */
[data-cm-variant="success"] {
  color: var(--cm-ok) !important;
  background-color: var(--cm-ok-bg) !important;
  border-color: var(--cm-ok) !important;
}

[data-cm-variant="warning"] {
  color: var(--cm-warn) !important;
  background-color: var(--cm-warn-bg) !important;
  border-color: var(--cm-warn) !important;
}

[data-cm-variant="danger"] {
  color: var(--cm-bad) !important;
  background-color: var(--cm-bad-bg) !important;
  border-color: var(--cm-bad) !important;
}

[data-cm-variant="info"] {
  color: var(--cm-info) !important;
  background-color: var(--cm-info-bg) !important;
  border-color: var(--cm-info) !important;
}

[data-cm-variant="secondary"] {
  color: var(--cm-mute) !important;
  background-color: var(--cm-mute-bg) !important;
  border-color: var(--cm-mute) !important;
}

/* E: machine-readable values (SHA256 fingerprints, run ids, paths).  Without
   `overflow-wrap` a 95-character fingerprint pushes a narrow screen into a
   horizontal scroll; the three ad-hoc spellings (`<code>`, `font-monospace`,
   nothing) collapse into this one class. */
.cm-mono {
  font-family: var(--bs-font-monospace);
  overflow-wrap: anywhere;
}

/* Secondary metadata that is not machine data. */
.cm-meta {
  font-size: var(--cm-fs-meta);
  color: var(--bs-secondary-color);
}

/* The copy button stays on one line next to its value. */
.cm-copy {
  white-space: nowrap;
}

/* F: dark theme — restore the borders and the striped rows.  With Bootstrap's
   defaults the border sat at 1.78:1 (almost invisible) and the stripe was
   indistinguishable from the row background.  The dark navbar is intentionally
   left alone (fixed theme, guarded by tests/test_ui_base.py). */
[data-bs-theme="dark"] {
  --bs-border-color: #6c757d;
  --bs-table-striped-bg: #2f353b;
}