/*
 * Project-owned styles. Tabler supplies layout and components; this file only adds what
 * is specific to this product, chiefly the health vocabulary from docs/05-health-model.md.
 * Anything that looks like a generic theming system belongs somewhere else — the UI is
 * deliberately not customisable (docs/10-web-ui.md).
 */

/* One colour per health state, so a state never renders two different ways. */
.health-healthy   { --health-color: var(--tblr-success); }
.health-degraded  { --health-color: var(--tblr-warning); }
.health-unhealthy { --health-color: var(--tblr-danger); }
.health-unknown   { --health-color: var(--tblr-muted); }
.health-offline   { --health-color: var(--tblr-dark); }

.health-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--health-color, var(--tblr-muted));
    vertical-align: middle;
}

/* Empty states carry an explanation, never a blank panel: an operator must be able to
 * tell "nothing is wrong" from "nothing is known". */
.empty-reason {
    max-width: 32rem;
}

/*
 * htmx normally injects these rules as an inline <style> element at load, which the
 * content security policy blocks. The meta tag in the layout turns that injection off
 * and the rules live here instead, verbatim from htmx's own defaults.
 */
.htmx-indicator {
    opacity: 0;
    visibility: hidden;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in;
}

/* Region health uses its own three-value vocabulary: a region is never "offline", and
 * conflating the two would let a screen imply a region is a machine. */
.region-healthy  { --health-color: var(--tblr-success); }
.region-degraded { --health-color: var(--tblr-warning); }
.region-critical { --health-color: var(--tblr-danger); }

/* A reason list is the point of the health model: every state says why it is that
 * state, and the explanation is never truncated behind a tooltip. */
.reason-list {
    margin: 0;
    padding-left: 1.1rem;
}

.reason-list li + li {
    margin-top: 0.25rem;
}

/* A suppressed alert is shown, never hidden: maintenance withholds the message and
 * nothing else (docs/07-alerts-incidents.md). */
.suppressed {
    opacity: 0.65;
}