/* ========================================
   Alert Levels — 5-tier taxonomy CSS

   Single source-of-truth styling for the alert level palette
   produced by the as-core `alert_levels` table:

     GREEN  — Safe         #22c55e
     YELLOW — Watch        #fbbf24
     ORANGE — Warning      #f97316
     RED    — Critical    #ef4444
     PURPLE — Catastrophic #a855f7

   Class names are the LOWERCASED level_name (`.level-{name}`),
   matching the output of `templates/alerts/level_badge.hbs` and
   `templates/alerts/level_dot.hbs` partials.

   Three surfaces:
     1. .level-badge.level-{name}      — pill chip in row tables
     2. .level-dot.level-{name}        — circle marker in sidebars
     3. .alert-level-btn.level-{name}  — selector button in forms

   Colours are intentionally hex literals, NOT --color-alert-* tokens:
     - The existing --color-alert-warning (#fbbf24) is yellow, but the
       new taxonomy maps "Warning" to ORANGE (#f97316). Reusing the
       token name with a different colour would silently shift every
       existing consumer.
     - The existing --color-alert-acknowledged (#a855f7) collides with
       the new PURPLE/Catastrophic level — tracked in JOB-AUS1-0000uz.
   When the token layer is reconciled, swap these literals for var() refs.
   ======================================== */

/* ---- Badge: pill chip (used in alert/incident list rows) ---- */

.level-badge.level-green {
  background: rgba(34,197,94,0.15);
  color: #22c55e;
}

.level-badge.level-yellow {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}

.level-badge.level-orange {
  background: rgba(249,115,22,0.15);
  color: #f97316;
}

.level-badge.level-red {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}

.level-badge.level-purple {
  background: rgba(168,85,247,0.15);
  color: #a855f7;
}

/* ---- Dot: circle marker (used in alert detail sidebar) ---- */
/* Base shape lives in eligtas.css (.level-dot). These rules add
   the per-level fill — the partial outputs `level-{lower}` so
   the lowercase variants here apply automatically. */

.level-dot.level-green  { background: #22c55e; }
.level-dot.level-yellow { background: #fbbf24; }
.level-dot.level-orange { background: #f97316; }
.level-dot.level-red    { background: #ef4444; }
.level-dot.level-purple { background: #a855f7; }

/* ---- Button: selector pill (used in alert/incident forms) ---- */
/* Base shape and inactive treatment live in eligtas.css
   (.alert-level-btn). Per-level active/hover treatment here. */

.alert-level-btn.level-green.active,
.alert-level-btn.level-green:hover {
  background: rgba(34,197,94,0.2);
  border-color: #22c55e;
  color: #22c55e;
}

.alert-level-btn.level-yellow.active,
.alert-level-btn.level-yellow:hover {
  background: rgba(251,191,36,0.2);
  border-color: #fbbf24;
  color: #fbbf24;
}

.alert-level-btn.level-orange.active,
.alert-level-btn.level-orange:hover {
  background: rgba(249,115,22,0.2);
  border-color: #f97316;
  color: #f97316;
}

.alert-level-btn.level-red.active,
.alert-level-btn.level-red:hover {
  background: rgba(239,68,68,0.2);
  border-color: #ef4444;
  color: #ef4444;
}

.alert-level-btn.level-purple.active,
.alert-level-btn.level-purple:hover {
  background: rgba(168,85,247,0.2);
  border-color: #a855f7;
  color: #a855f7;
}