/*
 * Machine-state indicators — the only place --state-* may be painted.
 *
 * One colour, one meaning. A machine's state is carried on three channels so
 * colour is never the only one: colour, shape (the glyph before the label) and
 * the label itself.
 *
 *   --state-healthy      green   online, operating normally, no process running
 *                                IDLE · AT TEMP · normal · standby
 *   --state-producing    blue    a machine process is in progress
 *                                PRINTING · RUNNING · cooling
 *   --state-offline      grey    not reporting
 *                                OFFLINE · unknown
 *   --state-maintenance  amber   out of service by decision
 *                                IN REPAIR
 *   --state-fault        red     malfunction requiring intervention
 *                                FAULT
 *   --state-critical     magenta outside fleet control
 *                                CAPTURED
 *
 * Normal states (healthy / producing / offline) are drawn as a quiet tint of
 * their own colour. Exception states (maintenance / fault / critical) are
 * drawn as solid fills, so on a 55-machine board the only loud cards are the
 * ones an operator has to do something about.
 *
 * Machine state is never drawn with --primary* (brand) or --color-* (feedback):
 * the brand green was previously used for PRINTING, which is what made two
 * different greens both mean "healthy". tests/design-tokens.test.mjs enforces
 * this, the state->colour mapping below, and every contrast ratio.
 */

/* ─── Shared chip ──────────────────────────────────────────────────────────── */

.fw-status-pill,
.fw-alert-badge,
.dash-state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}

.fw-status-pill { margin-top: 2px; }
.dash-state { margin-left: 12px; }

/* Glyph: the shape channel. Square by default, reshaped per state below. */
.fw-status-pill::before,
.fw-alert-badge::before,
.dash-state::before {
    content: '';
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: currentColor;
}

/* ─── State treatments ─────────────────────────────────────────────────────── */

/* Quiet states: tint of their own colour, coloured label. */
.fw-state-healthy {
    background: color-mix(in srgb, var(--state-healthy) calc(var(--state-tint) * 100%), transparent);
    color: var(--state-healthy);
}

.fw-state-producing {
    background: color-mix(in srgb, var(--state-producing) calc(var(--state-tint) * 100%), transparent);
    color: var(--state-producing);
}

.fw-state-offline {
    background: color-mix(in srgb, var(--state-offline) calc(var(--state-tint) * 100%), transparent);
    color: var(--state-offline);
    border: 1px dashed color-mix(in srgb, var(--state-offline) 45%, transparent);
    padding: 1px 7px;
}

/* Exception states: solid fill, dark ink, so they carry the board. */
.fw-state-maintenance {
    background: var(--state-maintenance);
    color: var(--state-ink);
}

.fw-state-fault {
    background: var(--state-fault);
    color: var(--state-ink);
}

.fw-state-critical {
    background: var(--state-critical);
    color: var(--state-ink);
}

/* ─── Glyph shapes ─────────────────────────────────────────────────────────── */

.fw-state-healthy::before { border-radius: 50%; }
.fw-state-producing::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fw-state-offline::before { height: 2px; border-radius: 1px; }
.fw-state-maintenance::before { border-radius: 1px; }
.fw-state-fault::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fw-state-critical::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ─── Dots (site rollups, sidebar, org chart, globe) ───────────────────────── */

/*
 * Dots carry state on colour and shape only, so they need >= 3:1 against the
 * panel they sit on and an accessible name from their container's title text.
 */
.fw-state-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: var(--state-offline);
}

.fw-state-dot.fw-state-healthy { background: var(--state-healthy); border-radius: 50%; }
.fw-state-dot.fw-state-producing { background: var(--state-producing); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.fw-state-dot.fw-state-offline { background: var(--state-offline); border-radius: var(--radius-sm); height: 4px; margin-bottom: 4px; }
.fw-state-dot.fw-state-maintenance { background: var(--state-maintenance); border-radius: 2px; }
.fw-state-dot.fw-state-fault { background: var(--state-fault); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fw-state-dot.fw-state-critical { background: var(--state-critical); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* Dots painted as a background only (no chip), keep colour but stay small. */
/* A share of machines in a state: the segments of a site's bar (widget-sites.js). */
.fw-state-bg-healthy { background: var(--state-healthy); }
.fw-state-bg-producing { background: var(--state-producing); }
.fw-state-bg-offline { background: var(--state-offline); }
.fw-state-bg-maintenance { background: var(--state-maintenance); }
.fw-state-bg-fault { background: var(--state-fault); }

.fw-state-dot--sm {
    width: 8px;
    height: 8px;
}

.fw-state-dot--sm.fw-state-offline { height: 3px; margin-bottom: 2px; }

/* ─── Counts and figures that report state ─────────────────────────────────── */

.fw-state-text-healthy { color: var(--state-healthy); }
.fw-state-text-producing { color: var(--state-producing); }
.fw-state-text-offline { color: var(--state-offline); }
.fw-state-text-maintenance { color: var(--state-maintenance); }
.fw-state-text-fault { color: var(--state-fault); }
.fw-state-text-critical { color: var(--state-critical); }

/* ─── State colour on other components ──────────────────────────────────────
 *
 * These components report machine state (a heater heating or at temperature,
 * a site with a fault, a machine online) but are laid out in their own
 * stylesheets. Their state colour lives here so --state-* is painted from
 * this one file; layout and chrome stay where the component is.
 */

/* dashboard.css */
.fw-tile.fault.has-faults .fw-tile-value {
    color: var(--state-fault);
}
.fw-alerts-healthy {
    border: 1px solid color-mix(in srgb, var(--state-healthy) 22%, transparent);
    background: color-mix(in srgb, var(--state-healthy) 6%, transparent);
}
.fw-alerts-healthy-icon {
    background: color-mix(in srgb, var(--state-healthy) 16%, transparent);
    color: var(--state-healthy);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--state-healthy) 28%, transparent);
}
.fw-alerts-healthy-title {
    color: var(--state-healthy);
}
.fw-site.has-fault {
    border-color: color-mix(in srgb, var(--state-fault) 40%, transparent);
}
.dash-fault {
    background: color-mix(in srgb, var(--state-fault) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--state-fault) 20%, transparent);
    color: var(--state-fault);
}
.dash-heater-progress-fill.temp-heating {
    background: var(--state-producing);
}
.dash-heater-progress-fill.temp-at-target {
    background: var(--state-healthy);
}
.dash-heater-progress-fill.temp-fault {
    background: var(--state-fault);
}
.temp-heating {
    color: var(--state-producing);
}
.temp-at-target {
    color: var(--state-healthy);
}
.temp-fault {
    color: var(--state-fault);
}
.dash-soak-badge.heating {
    background: color-mix(in srgb, var(--state-producing) 12%, transparent);
    color: var(--state-producing);
}
.dash-soak-badge.ready {
    background: color-mix(in srgb, var(--state-healthy) 12%, transparent);
    color: var(--state-healthy);
}
.fw-site-readiness.has-fault {
    border-color: color-mix(in srgb, var(--state-fault) 35%, transparent);
}
.fw-site-readiness-fill {
    background: var(--state-healthy);
}
.fw-stat-ready {
    color: var(--state-healthy);
}
.fw-stat-degraded {
    color: var(--state-maintenance);
}
.fw-gps-dot.online {
    background: var(--state-healthy);
}
.fw-gps-mode.gps-online {
    color: var(--state-healthy);
}
.fw-gps-mode.none {
    color: var(--state-offline);
}

/* fleet.css */
.scanner-item-state.online {
    color: var(--state-healthy);
}
.status-badge.online {
    background: color-mix(in srgb, var(--state-healthy) 12%, transparent);
    color: var(--state-healthy);
    border: 1px solid color-mix(in srgb, var(--state-healthy) 24%, transparent);
}
.status-badge.offline {
    background: color-mix(in srgb, var(--state-offline) 10%, transparent);
    color: var(--state-offline);
}

/* globe.css */
.globe-dot.online {
    background: var(--state-healthy);
}
.globe-grp-count.online {
    color: var(--state-healthy);
}
.globe-m-dot.online {
    background: var(--state-healthy);
}
.globe-d-m-dot.online {
    background: var(--state-healthy);
}
.globe-d-status.online {
    color: var(--state-healthy);
}

/* prep.css */
.prep-ready-dot {
    background: var(--state-healthy);
}
.prep-online {
    background: var(--state-offline);
}
.prep-online.is-online {
    background: var(--state-healthy);
}