/* Pill + picker dialogs (the geecomanage pattern, simplified for this app). */

.part-row {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0.5rem 0;
}
.part-row-head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;
}
.part-row-name { flex: 1; }
.part-row-name strong { font-size: 0.95rem; }
.part-row-id { color: var(--app-muted); font-size: 0.85rem; }
.part-row-count { color: var(--app-muted); font-size: 0.85rem; }

.pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--pico-primary-background); color: white;
  padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.82rem;
}
.pill-x {
  background: none; border: 0; color: white; cursor: pointer;
  padding: 0 0.2rem; border-radius: 999px; font-weight: 700;
}
.pill-x.confirming { background: rgba(220, 50, 47, 0.85); }
.pill-empty { color: var(--app-muted); font-size: 0.82rem; font-style: italic; }

.picker { display: grid; grid-template-columns: 1fr; gap: 0.4rem; margin-top: 0.4rem; }
.picker-list {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px; padding: 0.4rem;
  max-height: 12rem; overflow: auto;
}
.picker-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.4rem; border-radius: 4px; }
.picker-row:hover { background: rgba(127, 127, 127, 0.08); }
.picker-row input { margin: 0; }
.picker-actions { display: flex; gap: 0.4rem; align-items: center; }
.picker-flash { font-size: 0.85rem; font-weight: 600; }
.picker-flash--ok { color: #198754; }
.picker-flash--err { color: #c1272d; }
.row {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 0.5rem 0.6rem;
  margin: 0.4rem 0;
}

.row > label { margin: 0; white-space: nowrap; }
.row > select,
.row > .field { margin: 0; min-width: 0; }
.row > .field { display: flex; gap: 0.4rem; }
.row > .field > input,
.row > .field > textarea,
.row > .field > select { flex: 1; min-width: 0; }
.row > input[type="checkbox"] { justify-self: start; }
@media (max-width: 32rem) {
  .row { grid-template-columns: 1fr; }
  .row > label { margin-bottom: 0.1rem; }
}