/* Pure Flowbite Badge Components - Clean Implementation */

/* Severity Badges - Using Flowbite color system */

/* ============================================================================
   Device / Entity Status Badges
   One class per semantic state — each carries the correct border + background
   for that state. Replaces the previous inline style="border: 1px solid var(--sev-medium-border);
   background: var(--sev-medium-bg)" that was copy-pasted across all non-Online/Offline states
   (wrong orange border regardless of color meaning).
   ============================================================================ */

/* Shared base for all device/entity status pills.
   This used to carry border-radius alone, which left the other eight
   appearance decisions — the flex row, the gap, the padding, the size, the
   weight — spelled out at all fifteen branches of status_badge(). A class
   that saves one utility out of nine does not get reached for, so the same
   eight-token string was pasted fifteen times and nothing held them equal.
   The base now owns the whole chip; a tone class adds only colour.

   .alarm-status-badge had no base rule at all and shared the identical
   geometry, so the two are declared together rather than kept a shade apart. */
.device-status-badge,
.alarm-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    /* py-0.5 px-1.5 */
    padding: 0.125rem 0.375rem;
    border-radius: 6px;

    /* Tailwind's text-xs is 12px, which is --fs-sm on this scale, not --fs-xs.
       The token names are offset from Tailwind's by one step. */
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* The online badge is the only one with a leading dot. Its colour used to sit
   on the element in the macro, which left the badge's appearance split between
   this file and the template. */
.device-status-badge__dot {
    background-color: var(--hex-rssi-excellent);
}

/* Online — green */
.device-status-badge-online {
    border: 1px solid var(--success-soft-bg);
    background: var(--status-online-bg);
    color: var(--chart-green-darkest);
}

/* Offline — red */
.device-status-badge-offline {
    border: 1px solid var(--sev-high-border);
    background: var(--sev-high-bg);
    color: var(--hex-rssi-critical);
}

/* Warning — amber */
.device-status-badge-warning {
    border: 1px solid var(--banner-warning-border);
    background: var(--banner-warning-bg);
    color: var(--warning-darkest-fg);
}

/* Maintenance — blue */
.device-status-badge-maintenance {
    border: 1px solid var(--info-border);
    background: var(--sev-low-bg);
    color: var(--info-strong-fg);
}

/* Error — red (same palette as offline but distinct semantic) */
.device-status-badge-error {
    border: 1px solid var(--sev-high-border);
    background: var(--sev-high-bg);
    color: var(--hex-rssi-critical);
}

/* Active (policy / tag) — green */
.device-status-badge-active {
    border: 1px solid var(--success-soft-bg);
    background: var(--status-online-bg);
    color: var(--chart-green-darkest);
}

/* Inactive (policy / tag) — gray */
.device-status-badge-inactive {
    border: 1px solid var(--border-medium);
    background: var(--bg-page);
    color: var(--gw-marker-border);
}

/* Pending (policy / tag / alarm) — amber */
.device-status-badge-pending {
    border: 1px solid var(--banner-warning-border);
    background: var(--banner-warning-bg);
    color: var(--warning-darkest-fg);
}

/* Deprecated (policy / tag) — red-tinted */
.device-status-badge-deprecated {
    border: 1px solid var(--sev-high-border);
    background: var(--sev-high-bg);
    color: var(--hex-rssi-critical);
}

/* ============================================================================
   Alarm-specific status badges
   ============================================================================ */

/* Alarm pending (maps from SDK resolution_status="pending" / legacy "ACTIVE") — red */
.alarm-status-badge-pending {
    border: 1px solid var(--sev-high-border);
    background: var(--sev-high-bg);
    color: var(--hex-rssi-critical);
}

/* Acknowledged — orange */
.alarm-status-badge-acknowledged {
    border: 1px solid var(--sev-medium-border);
    background: var(--sev-medium-bg);
    color: var(--sev-major-darkest-fg);
}

/* Resolved — green */
.alarm-status-badge-resolved {
    border: 1px solid var(--success-soft-bg);
    background: var(--status-online-bg);
    color: var(--chart-green-darkest);
}

/* False positive — gray */
.alarm-status-badge-false-positive {
    border: 1px solid var(--border-medium);
    background: var(--bg-page);
    color: var(--gw-marker-border);
}

/* Default / unknown — gray */
.device-status-badge-unknown {
    border: 1px solid var(--border-medium);
    background: var(--bg-page);
    color: var(--fg-3); /* was the semantic .text-secondary in the macro */
}

/* ============================================================================
   Pills — the type / importance badges
   ----------------------------------------------------------------------------
   These macros each carried the same shape: a layout base plus a background /
   text / border triple chosen per value. The layout stays in the markup as
   utilities (it names nothing worth naming); the triple lives here.

   Follows importance_badge_detail, which already did this correctly with
   .dd-pill-importance-* in device-detail.css rather than a Tailwind palette.

   Values are the ones the utilities had, except three that snap onto a token
   the palette already held rather than adding a near-duplicate: the red
   background (dE 2.5) and red border (dE 3.8) reuse what alert-banner.css
   picked for exactly the same job, so the two surfaces now agree instead of
   holding two reds a shade apart.
   ============================================================================ */

/* Shared base for the pill set. Like .device-status-badge, this class carried
   colour only, so all six call sites respelled the same six-utility geometry —
   and drifted while doing it: two wrote rounded-full and four wrote rounded,
   which is one class rendering two shapes. The base settles it at pill, which
   is what the name claims. */
.pill {
    display: inline-flex;
    align-items: center;

    /* px-2.5 py-0.5 */
    padding: 0.125rem 0.625rem;
    border: 1px solid;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    white-space: nowrap;
}

.pill--neutral {
    background: var(--status-neutral-bg);
    border-color: var(--border-base); /* border-subtle */
    color: var(--gw-marker-border);
}

.pill--importance-high {
    background: var(--status-danger-bg);
    border-color: var(--sev-critical-border);
    color: var(--hex-rssi-critical);
}

.pill--importance-medium {
    background: var(--warning-softer-bg);
    border-color: var(--policy-looser-bg);
    color: var(--sev-major-darkest-fg);
}

.pill--importance-low {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-strong-fg);
}

/* Device name + id ----------------------------------------------------------
 * These two classes were styled with a Tailwind directive that the CDN build
 * does not process in a linked stylesheet, so the declarations never reached
 * the page. See bead p_frontend-127.
 *
 * Most of what they asked for was already on the elements as utilities:
 * .device-id carries a danger colour, a mono face and a small size, and that
 * colour is the same red the directive named. The container's colour was
 * redundant too, since everything inside it sets its own.
 *
 * The one thing genuinely lost was the gap before the parenthesised id.
 */
.device-id {
    margin-left: 0.25rem;
}