/*
 * Intrusion Groups (ticket 128) - the More menu's group list and group detail
 * (js/views/intrusion_groups.js). The tables, header stats, and back link reuse the Operations
 * rules (console.css's table.data / .section / .warroom-kpi / .command-hero-kpis, operations.css's
 * .operation-header / .operation-back / .operation-header__title), the pills (the kind chips
 * `.ig-chip--*`, the member provenance `.ig-prov--*` and the verification verdicts `.ig-verify--*`)
 * take their shape and tone from pills.css (ticket 001077), and the form fields from console.css's
 * .login-label and .login-input. This file only adds the header rows and the create/manage form
 * layout.
 */

.ig-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

/* A group's name in the list is set in the body face, like every other table's names; only the member
   Case File ids keep the mono face. */
.ig-member__id {
  font-family: var(--font-mono);
}

/* "0 Rings" on a row is a quiet dash, not a repeated phrase. */
.ig-row__none {
  color: var(--ink-dim);
}

/* The one kind the whole list shares, said once beside the count (the Kind column is left out then); a
   list of mixed kinds gets the filter instead. */
.ig-kind-note {
  color: var(--ink-dim);
  font: var(--type-footnote);
}

.ig-kind-filter {
  flex: 0 1 auto;
  min-width: 11rem;
  max-width: 18rem;
}

.section__head:has(> .ig-kind-filter) {
  flex-wrap: wrap;
}

.ig-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.ig-header__title {
  overflow-wrap: anywhere;
}

.ig-header__description {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ig-header__products {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.ig-header__label {
  font: var(--type-footnote);
  color: var(--ink-muted);
}

/* The facts table fills the page like the tiles above it (no narrower column of its own). */
.ig-facts .kv-val {
  overflow-wrap: anywhere;
}

/* The tiles on a group page share one height and one label row: a Partial chip beside "Case Files" must
   not push that tile's number below its neighbour's, and the chip needs a gap from the label. */
.ig-page .command-hero-kpis {
  align-items: stretch;
}

.ig-page .warroom-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--space-6);
}

.ig-truncated {
  color: var(--st-4xx);
}

.ig-create {
  margin: 0 0 1.2rem;
}

.ig-create__summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.ig-create__summary::-webkit-details-marker {
  display: none;
}

.ig-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.ig-form__field {
  min-width: 14rem;
}

.ig-form__description {
  min-width: 18rem;
  resize: vertical;
}

.ig-form__status {
  flex-basis: 100%;
  margin: 0.4rem 0 0;
}

.ig-form__status:empty {
  display: none;
}

.ig-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ig-delete {
  color: var(--st-5xx);
}

.ig-operations {
  margin: 0;
  padding-left: 1.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.ig-operations a,
.ig-member__id a {
  color: var(--gold-2);
}

/*
 * Group chips and pin controls (ticket 129, js/group_chips.js): the membership row on the session
 * and operation pages and the compact chips in the work queue and Operations list rows. Names can
 * run to 128 characters and .chip does not wrap, so each name is cut with an ellipsis.
 */
.ig-membership {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1rem;
}

.ig-membership .ig-pin {
  margin: 0;
}

.ig-membership .ig-pin[open] {
  flex-basis: 100%;
}

.ig-membership__none {
  margin: 0;
}

/*
 * The same-tool sources list under the membership row (ticket 424, js/group_chips.js): one linked
 * source IP per line with its request count and path similarity, and the "Add all to group" form.
 */
.ig-siblings {
  margin: 0 0 1rem;
}

.ig-siblings__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0.35rem 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.ig-siblings__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  overflow-wrap: anywhere;
}

.ig-siblings__item .body-note,
.ig-siblings__capped {
  margin: 0;
}

.ig-siblings .ig-pin {
  margin: 0.25rem 0 0;
}

.ig-ref {
  gap: 0.35rem;
  max-width: 100%;
}

.ig-ref__name {
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
}

.ig-ref__name:hover,
.ig-ref--compact:hover {
  text-decoration: underline;
}

.ig-ref__category {
  font-weight: 400;
  color: var(--ink-dim);
}

.ig-ref__remove {
  padding: 0 0.1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.ig-ref__remove:hover,
.ig-ref__remove:focus-visible {
  color: var(--st-5xx);
}

.ig-ref--compact {
  display: inline-block;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

/* The compact chip's verdict glyph (ticket 989, js/group_chips.js): a check for a verified crawler claim,
   a warning sign for a mismatch, in the chip's own text color so the chip stays neutral. */
.ig-ref__glyph {
  width: 0.9em;
  height: 0.9em;
  margin-left: 0.25em;
  vertical-align: -0.1em;
}

.ig-ref-more {
  color: var(--ink-dim);
}

.ig-pin__note {
  flex-basis: 100%;
  margin: 0;
}

/*
 * Bulk pin (ticket 144, js/group_chips.js's bulkPinBar() and js/views/investigations.js): the work
 * queue's checkbox column for analysts and admins, and the bar under the table that pins every
 * ticked row into one group. The bar sticks to the bottom of the viewport while a long queue
 * scrolls, so it stays in reach of rows ticked far down the page.
 */
.investigations-row__select {
  width: 2.25rem;
  text-align: center;
  cursor: default;
}

.investigations-row__select input {
  cursor: pointer;
}

.investigations-row:has(.investigations-row__select input:checked) {
  background: var(--gold-soft);
}

.ig-bulk {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  background: var(--panel);
}

.ig-bulk__count {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--gold);
}

.ig-bulk .ig-form {
  margin-top: 0;
}

@media (max-width: 640px) {
  .ig-form__field,
  .ig-form__description {
    min-width: 0;
    width: 100%;
  }

  .ig-ref__name {
    max-width: 12rem;
  }
}