/* ── Pipeline tab custom styles ───────────────────────── */

/* Stage strip pills — uniform 22×16px */
.pl-sd {
  width: 22px; height: 16px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.pl-sd-done    { background: #bbf7d0; color: #15803d; }
.pl-sd-pending { background: #f3f4f6; }
.pl-sd-uw      { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.pl-sd-ku      { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.pl-sd-osu     { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.pl-sd-stuck   { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.pl-sd-planned { background: #f9fafb; color: #9ca3af; border: 1px dashed #d1d5db; }

/* Mutant row */
.pl-row {
  display: flex; align-items: center;
  padding: 0 14px; border-bottom: 1px solid #f3f4f6;
  cursor: pointer; transition: background 0.1s; min-height: 40px;
  position: relative;
}
.pl-row:last-child { border-bottom: none; }
.pl-row:hover { background: #f9fafb; }
.pl-row.is-priority { border-left: 2.5px solid #f97316; padding-left: 11.5px; }
.pl-row.is-stuck    { border-left: 2.5px solid #ef4444; padding-left: 11.5px; }
.pl-row.is-mine     { background: #fefce8; }
.pl-row.is-planned  { background: #fafafa; }
.pl-row.is-expanded { background: #f8f7ff; border-left: 2.5px solid #7c3aed; padding-left: 11.5px; }
.pl-row.is-priority.is-mine { background: #fefce8; }

/* Icon toggle buttons (flame + star) */
.pl-icon-btn {
  width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 5px; cursor: pointer;
  background: transparent; border: none; padding: 0; position: relative;
  flex-shrink: 0;
}
.pl-icon-btn:hover { background: rgba(0,0,0,0.05); }


/* Sort dropdown */
.pl-sort-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  background: white; border: 1px solid #e5e7eb; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1); min-width: 140px; overflow: hidden;
}
.pl-sort-dropdown.open { display: block; }

/* Expand panel */
.pl-expand-panel {
  display: none; border-top: 1px solid #ede9fe; background: #faf9ff;
  padding: 14px 16px 16px;
}
.pl-expand-panel.open { display: block; }

/* Stage checklist tile */
.pl-stage-tile {
  display: flex; flex-direction: column; align-items: center;
  background: white; border: 1px solid #e5e7eb; border-radius: 9px;
  padding: 8px 10px; min-width: 76px; cursor: pointer;
  transition: border-color 0.1s; position: relative; user-select: none;
}
.pl-stage-tile:hover { border-color: #c4b5fd; }
.pl-stage-tile.tile-done   { border-color: #86efac; background: #f0fdf4; }
.pl-stage-tile.tile-active { border-color: #c4b5fd; background: #faf5ff; }
.pl-stage-tile.tile-stuck  { border-color: #fca5a5; background: #fff5f5; }
.pl-stage-tile.tile-picking { border-color: #7c3aed; box-shadow: 0 0 0 2px #ede9fe; }

/* Stage checkbox */
.pl-tile-cb {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #d1d5db;
  background: white; display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #15803d; margin-bottom: 5px; flex-shrink: 0;
}
.pl-tile-cb.checked { background: #bbf7d0; border-color: #86efac; }

/* Stage picker popup */
.pl-picker-popup {
  display: none; position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: white; border: 1px solid #c4b5fd;
  border-radius: 10px; padding: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 40; min-width: 175px;
}
.pl-picker-popup.open { display: block; }

/* Remove confirm strip */
.pl-remove-confirm {
  display: none; align-items: center; gap: 7px; background: #fff5f5;
  border: 1px solid #fca5a5; border-radius: 8px; padding: 7px 11px; font-size: 11px;
}
.pl-remove-confirm.open { display: flex; }

/* Strain chips — match type pill sizing */
.pl-strain-chip {
  font-size: 9px; font-weight: 700; border-radius: 3px; padding: 1.5px 5px;
  cursor: pointer; border: 1px solid transparent; transition: all .12s; user-select: none;
}
.pl-chip-l2  { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.pl-chip-cm  { background: #ffedd5; color: #c2410c; border-color: #fdba74; }
.pl-chip-ctd { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.pl-chip-off { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }

/* Show-all / collapse row */
.pl-show-all-row {
  padding: 8px 14px; font-size: 11px; color: #9ca3af;
  text-align: center; border-top: 1px solid #f3f4f6;
}

/* ── Mobile overrides ─────────────────────────────────── */
@media (max-width: 639px) {
  /* Green title */
  .pl-pipeline-title { color: #163b2b; }

  /* Remove card chrome from group row containers */
  .pl-group-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-top: 1px solid #e9ece9 !important;
  }

  /* Remove card chrome from stage key */
  .pl-stage-key-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 8px !important;
    margin-bottom: 8px !important;
  }

  /* Hide the verbose stage sequence text on mobile */
  .pl-stage-key-seq { display: none; }

  /* Larger tap targets for flame + star */
  .pl-icon-btn { width: 32px; height: 32px; }

  /* Picker popup: keep within viewport by anchoring right on mobile */
  .pl-picker-popup {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* Stage key legend pills */
.skp-done    { background: #bbf7d0; }
.skp-uw      { background: #ede9fe; border: 1px solid #c4b5fd; }
.skp-ku      { background: #dbeafe; border: 1px solid #93c5fd; }
.skp-osu     { background: #ffedd5; border: 1px solid #fdba74; }
.skp-stuck   { background: #fee2e2; border: 1px solid #fca5a5; }
.skp-pending { background: #f3f4f6; }