/* =====================================================
   Zyndhux System States
   Scope: Visual & interaction states driven by system logic
   Notes:
   - No layout rules
   - No media queries
   - Driven by classes & data-attributes
   ===================================================== */

/* ===================== GENERIC STATES ===================== */

.is-loading {
  opacity: 0.55;
  pointer-events: none;
  cursor: progress;
}

.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  filter: grayscale(1);
}

.is-initializing {
  opacity: 0.65;
  filter: grayscale(1) blur(0.5px);
}

.is-stale {
  opacity: 0.75;
}

/* ===================== ERROR & DEGRADED ===================== */

.has-error {
  border-color: var(--zx-major);
  background: rgba(239, 68, 68, 0.08);
}

.has-warning {
  border-color: var(--zx-degraded);
  background: rgba(245, 158, 11, 0.08);
}

.is-degraded {
  opacity: 0.85;
}

/* ===================== MONITORING STATES ===================== */

.is-unmonitored {
  opacity: 0.6;
  filter: grayscale(1);
}

.is-unmonitored .status-indicator,
.is-unmonitored .product-status-dot,
.is-unmonitored .component-status {
  background: var(--zx-text-muted);
}

/* ===================== INCIDENT STATES ===================== */

.has-incident {
  border-color: var(--zx-major);
}

.has-incident .status-indicator {
  background: var(--zx-major);
  animation: zx-pulse 1.6s infinite;
}

.has-maintenance {
  border-color: var(--zx-maintenance);
}

.has-maintenance .status-indicator {
  background: var(--zx-maintenance);
}

/* ===================== EMPTY / NO DATA ===================== */

.is-empty {
  opacity: 0.7;
}

.is-empty .uptime-bar {
  opacity: 0.25;
  filter: grayscale(1);
}

/* ===================== INTERACTION STATES ===================== */

.is-clickable {
  cursor: pointer;
}

.is-clickable:hover {
  opacity: 0.95;
}

/* ===================== ACCESSIBILITY SAFETY ===================== */

.is-hidden {
  display: none !important;
}

.is-visually-muted {
  color: var(--zx-text-muted);
}
