/*
 * cati-local/badges.css -- .u-tag / .u-pill variants and the urgent priority level
 *
 * Local extension to the CATI visual system. The official package
 * (client/static/css/cati/*.css, delivered by design) covers the wizard and
 * login only; everything here follows the same --uvaq-* tokens but is NOT part
 * of that delivery. Each pattern is documented in
 * _uvaq-assets/sistema-visual-cati/extensiones-locales/. Loaded from base.html
 * right after cati.min.css (see the <link> list there for the order).
 */

/* Neutral tag (canvas .tag-kept): outlined, no fill -- for labels that
   carry no state (a role name, a category). Replaces the cyan bg-info
   badge, which isn't a CATI color. */
.u-tag {
    display: inline-flex; align-items: center;
    padding: 2px var(--uvaq-space-2);
    border: 1px solid var(--uvaq-border-strong);
    border-radius: var(--uvaq-radius-sm);
    color: var(--uvaq-text-secondary);
    font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold);
    white-space: nowrap;
}

/* State pill (canvas .pill): shape carries the meaning (leading dot), color
   reinforces it. --ok = active/success, --off = inactive/neutral. */
.u-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--uvaq-radius-pill);
    font-size: var(--uvaq-fs-micro); font-weight: var(--uvaq-fw-bold);
    letter-spacing: var(--uvaq-tracking-micro); text-transform: uppercase;
    white-space: nowrap;
}
.u-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background-color: currentColor;
}
.u-pill--ok { background-color: var(--uvaq-status-resolved-bg); color: var(--uvaq-status-resolved-text); }
.u-pill--off { background-color: var(--uvaq-neutral-100); color: var(--uvaq-text-secondary); }
.u-pill--danger { background-color: var(--uvaq-danger-bg); color: var(--uvaq-danger); }
.u-pill--warn { background-color: var(--uvaq-warning-bg); color: var(--uvaq-warning); }
/* A pill carrying a number (HTTP status code): the value is data, so no
   small caps and no tracking. */
.u-pill.mono { text-transform: none; letter-spacing: 0; }

/* Tag variants for a *type* that denotes a problem (audit event "error",
   "rate_limited"). Still a tag -- outlined, no fill -- because it labels a
   category, not a state; only the outline color changes. */
.u-tag--danger { border-color: var(--uvaq-danger-border); color: var(--uvaq-danger); }
.u-tag--warn { border-color: var(--uvaq-warning-border); color: var(--uvaq-warning); }

/* --- Priority: "urgent" level (local extension). The CATI package defines
   low/medium/high (.u-priority--*); the app also has "urgent". Same bars,
   danger color on text and a tinted background so it reads one notch above
   high without inventing a new hue. --- */
.u-priority--urgent { color: var(--uvaq-danger); background-color: var(--uvaq-danger-bg); border-color: var(--uvaq-danger-border); }
.u-priority--urgent .u-priority__bars i { background-color: var(--uvaq-danger); }