/* ========================================
   Incident Statuses — CAD lifecycle taxonomy CSS

   Single source-of-truth styling for the incident status palette
   produced by the as-core `incident_statuses` table (13 active
   rows, status_type='incident').

   13-status lifecycle (sort_order):

     10  new                — intake     grey
     20  validated          — intake     blue
     30  ready_to_dispatch  — intake     blue
     40  approved           — approval   blue
     50  assigned           — dispatch   blue
     60  dispatched         — dispatch   blue
     70  tasked             — dispatch   blue
     80  acknowledged       — engaged    teal
     90  en_route           — engaged    teal
    100  on_scene           — on_scene   green
    110  completed          — closed     green
    120  released           — closed     green
    200  cancelled          — exception  red

   Class names are the lowercased `status_name` (`.status-{name}`),
   matching the output of the `incidents/form.hbs` status pill block.
   Colours drive off --color-incident-status-{bucket} tokens in
   tokens/theme-eligtas.css.

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

/* ---- Badge: pill chip ---- */

.status-badge.status-new               { background: rgba(var(--color-incident-status-grey),  0.15); color: rgb(var(--color-incident-status-grey)); }
.status-badge.status-locating          { background: rgba(var(--color-incident-status-grey),  0.15); color: rgb(var(--color-incident-status-grey)); }
.status-badge.status-located           { background: rgba(var(--color-incident-status-grey),  0.15); color: rgb(var(--color-incident-status-grey)); }
.status-badge.status-validated         { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-ready_to_dispatch { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-approved          { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-assigned          { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-dispatched        { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-booked            { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-tasked            { background: rgba(var(--color-incident-status-blue),  0.15); color: rgb(var(--color-incident-status-blue)); }
.status-badge.status-acknowledged      { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-en_route          { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-on_scene          { background: rgba(var(--color-incident-status-green), 0.15); color: rgb(var(--color-incident-status-green)); }
.status-badge.status-patient_onboard   { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-en_route_hospital { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-en_route_dest     { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-arrived_hospital  { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-arrived_dest      { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-returning         { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-back_to_base      { background: rgba(var(--color-incident-status-teal),  0.15); color: rgb(var(--color-incident-status-teal)); }
.status-badge.status-completed         { background: rgba(var(--color-incident-status-green), 0.15); color: rgb(var(--color-incident-status-green)); }
.status-badge.status-released          { background: rgba(var(--color-incident-status-green), 0.15); color: rgb(var(--color-incident-status-green)); }
.status-badge.status-cancelled         { background: rgba(var(--color-incident-status-red),   0.15); color: rgb(var(--color-incident-status-red)); }

/* ---- Dot: circle marker ---- */

/* Base sizing/shape — mirrors .level-dot (eligtas.css) so a .status-dot
   can stand in for a .level-dot inside .filter-btn toolbar pills. */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}

/* Toolbar pills use the smaller 6px dot, matching .filter-btn .level-dot. */
.filter-btn .status-dot {
  width: 6px;
  height: 6px;
}

.status-dot.status-new               { background: rgb(var(--color-incident-status-grey)); }
.status-dot.status-locating          { background: rgb(var(--color-incident-status-grey)); }
.status-dot.status-located           { background: rgb(var(--color-incident-status-grey)); }
.status-dot.status-validated         { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-ready_to_dispatch { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-approved          { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-assigned          { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-booked            { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-dispatched        { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-tasked            { background: rgb(var(--color-incident-status-blue)); }
.status-dot.status-acknowledged      { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-en_route          { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-on_scene          { background: rgb(var(--color-incident-status-green)); }
.status-dot.status-patient_onboard   { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-en_route_hospital { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-en_route_dest     { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-arrived_hospital  { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-arrived_dest      { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-returning         { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-back_to_base      { background: rgb(var(--color-incident-status-teal)); }
.status-dot.status-completed         { background: rgb(var(--color-incident-status-green)); }
.status-dot.status-released          { background: rgb(var(--color-incident-status-green)); }
.status-dot.status-cancelled         { background: rgb(var(--color-incident-status-red)); }

/* ---- Button: selector pill (mirrors .alert-level-btn sizing/shape;
       the .status-btn class only carries colour + active/hover state,
       the form picks up the shared sizing from .alert-level-btn /
       .status-selector flex rules in eligtas.css). ---- */

.status-btn.status-new.active,
.status-btn.status-new:hover {
  background: rgba(var(--color-incident-status-grey), 0.2);
  border-color: rgb(var(--color-incident-status-grey));
  color: rgb(var(--color-incident-status-grey));
}

.status-btn.status-validated.active,
.status-btn.status-validated:hover,
.status-btn.status-ready_to_dispatch.active,
.status-btn.status-ready_to_dispatch:hover,
.status-btn.status-approved.active,
.status-btn.status-approved:hover,
.status-btn.status-assigned.active,
.status-btn.status-assigned:hover,
.status-btn.status-dispatched.active,
.status-btn.status-dispatched:hover,
.status-btn.status-tasked.active,
.status-btn.status-tasked:hover {
  background: rgba(var(--color-incident-status-blue), 0.2);
  border-color: rgb(var(--color-incident-status-blue));
  color: rgb(var(--color-incident-status-blue));
}

.status-btn.status-acknowledged.active,
.status-btn.status-acknowledged:hover,
.status-btn.status-en_route.active,
.status-btn.status-en_route:hover {
  background: rgba(var(--color-incident-status-teal), 0.2);
  border-color: rgb(var(--color-incident-status-teal));
  color: rgb(var(--color-incident-status-teal));
}

.status-btn.status-on_scene.active,
.status-btn.status-on_scene:hover,
.status-btn.status-completed.active,
.status-btn.status-completed:hover,
.status-btn.status-released.active,
.status-btn.status-released:hover {
  background: rgba(var(--color-incident-status-green), 0.2);
  border-color: rgb(var(--color-incident-status-green));
  color: rgb(var(--color-incident-status-green));
}

.status-btn.status-cancelled.active,
.status-btn.status-cancelled:hover {
  background: rgba(var(--color-incident-status-red), 0.2);
  border-color: rgb(var(--color-incident-status-red));
  color: rgb(var(--color-incident-status-red));
}