/**
 * Pipeline phase colours — single source of truth
 * Match Gantt bars on /pipeline/ and phase chips on project pages.
 *
 * procurement  #10b981  green
 * design       #06b6d4  cyan
 * construction #0891b2  teal-blue
 * testing      #0d9488  teal
 * operation    #94a3b8  slate
 */

:root {
  --phase-procurement: #10b981;
  --phase-design: #06b6d4;
  --phase-construction: #0891b2;
  --phase-testing: #0d9488;
  --phase-operation: #94a3b8;
}

/* Legend / colour boxes only — do NOT paint bare .phase-* on buttons
   (pipeline filter chips use .phase-chip-btn + phase name for colour cues) */
.phase-color-box.phase-procurement { background: var(--phase-procurement); }
.phase-color-box.phase-design { background: var(--phase-design); }
.phase-color-box.phase-construction { background: var(--phase-construction); }
.phase-color-box.phase-testing { background: var(--phase-testing); }
.phase-color-box.phase-operation { background: var(--phase-operation); }

/* Utility fills when an element needs solid phase colour without being a button */
.phase-fill-procurement { background: var(--phase-procurement); }
.phase-fill-design { background: var(--phase-design); }
.phase-fill-construction { background: var(--phase-construction); }
.phase-fill-testing { background: var(--phase-testing); }
.phase-fill-operation { background: var(--phase-operation); }

/* Gantt bar segments */
.gantt-bar.phase-procurement,
.gantt-bar.phase-seg.phase-procurement { background: var(--phase-procurement) !important; }
.gantt-bar.phase-design,
.gantt-bar.phase-seg.phase-design { background: var(--phase-design) !important; }
.gantt-bar.phase-construction,
.gantt-bar.phase-seg.phase-construction { background: var(--phase-construction) !important; }
.gantt-bar.phase-testing,
.gantt-bar.phase-seg.phase-testing { background: var(--phase-testing) !important; }
.gantt-bar.phase-operation,
.gantt-bar.phase-seg.phase-operation { background: var(--phase-operation) !important; }

/* Pipeline card phase chips */
.card-phase-btn.phase-procurement { background: var(--phase-procurement); color: #fff; }
.card-phase-btn.phase-design { background: var(--phase-design); color: #fff; }
.card-phase-btn.phase-construction { background: var(--phase-construction); color: #fff; }
.card-phase-btn.phase-testing { background: var(--phase-testing); color: #fff; }
.card-phase-btn.phase-operation { background: var(--phase-operation); color: #fff; }

/* Project detail phase navigation chips */
.phase-nav a,
.phase-focus-nav a,
.phase-switcher a.phase-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 2px solid transparent;
  color: #fff;
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.phase-nav a.phase-procurement,
.phase-focus-nav a.phase-procurement,
.phase-switcher a.phase-procurement { background: var(--phase-procurement); }
.phase-nav a.phase-design,
.phase-focus-nav a.phase-design,
.phase-switcher a.phase-design { background: var(--phase-design); }
.phase-nav a.phase-construction,
.phase-focus-nav a.phase-construction,
.phase-switcher a.phase-construction { background: var(--phase-construction); }
.phase-nav a.phase-testing,
.phase-focus-nav a.phase-testing,
.phase-switcher a.phase-testing { background: var(--phase-testing); }
.phase-nav a.phase-operation,
.phase-focus-nav a.phase-operation,
.phase-switcher a.phase-operation { background: var(--phase-operation); }

.phase-nav a:hover,
.phase-focus-nav a:hover,
.phase-switcher a.phase-chip:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Active = same colour + ring / stronger edge for clarity */
.phase-nav a.active,
.phase-focus-nav a.is-active,
.phase-switcher a.phase-chip.is-active {
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.2), 0 4px 12px rgba(15, 23, 42, 0.12);
  outline: 2px solid #fff;
  outline-offset: -4px;
  filter: brightness(1.02);
}

/* Dot legend marker inside chip (optional) */
.phase-nav a::before,
.phase-focus-nav a.phase-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

/* Phase panel border tint matches active phase when class is set on panel */
.phase-panel.phase-procurement,
.phase-focus-panel.phase-procurement { border-color: var(--phase-procurement); }
.phase-panel.phase-design,
.phase-focus-panel.phase-design { border-color: var(--phase-design); }
.phase-panel.phase-construction,
.phase-focus-panel.phase-construction { border-color: var(--phase-construction); }
.phase-panel.phase-testing,
.phase-focus-panel.phase-testing { border-color: var(--phase-testing); }
.phase-panel.phase-operation,
.phase-focus-panel.phase-operation { border-color: var(--phase-operation); }

.phase-panel.phase-procurement .kicker,
.phase-focus-panel.phase-procurement .phase-focus-kicker { color: var(--phase-procurement); }
.phase-panel.phase-design .kicker,
.phase-focus-panel.phase-design .phase-focus-kicker { color: var(--phase-design); }
.phase-panel.phase-construction .kicker,
.phase-focus-panel.phase-construction .phase-focus-kicker { color: var(--phase-construction); }
.phase-panel.phase-testing .kicker,
.phase-focus-panel.phase-testing .phase-focus-kicker { color: var(--phase-testing); }
.phase-panel.phase-operation .kicker,
.phase-focus-panel.phase-operation .phase-focus-kicker { color: var(--phase-operation); }