/* admin-view-attention.css — layout for the Needs attention view only.
 * Zero literals: tokens + component classes (ISC-85 layer 4, ISC-86). */

.attention-view {
  gap: var(--page-gap);
}

/* Toolbar: chips render inside a display:contents wrapper so .toolbar's own
   flex gap applies; the sort label is the component's .sort-label. */
.att-chips {
  display: contents;
}
.att-domain-filter {
  width: 260px;
}
.att-notice:empty {
  display: none;
}

/* Unified inbox: .table-card shell with grid rows (mockup 03). */
.att-inbox {
  display: flex;
  flex-direction: column;
}
.att-head,
.att-row {
  display: grid;
  grid-template-columns: 44px 150px minmax(0, 1fr) 260px 90px 150px;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
}
.att-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--tint-2);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.att-row {
  border-bottom: 1px solid var(--tint);
}
.att-inbox > .att-row:last-child {
  border-bottom: 0;
}
.att-check {
  width: var(--sp-5);
  height: var(--sp-5);
  accent-color: var(--accent);
}
.att-type {
  justify-self: start;
}
.att-item {
  min-width: 0;
}
.att-item-name {
  font-size: var(--fs-item);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.att-item-sub {
  font-size: var(--fs-label);
  color: var(--ink-muted);
}
.att-why {
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.att-age {
  font-size: var(--fs-small);
  white-space: nowrap;
}
.att-age.over {
  color: var(--warn-ink);
  font-weight: 600;
}
.att-col-action,
.att-action {
  text-align: right;
  justify-self: end;
}

/* Floating bulk bar: centered in the view's grid, sticky via .bulkbar. */
.att-bulkbar {
  justify-self: center;
}

@media (max-width: 900px) {
  .att-head {
    display: none;
  }
  .att-row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }
  .att-row .att-why,
  .att-row .att-age {
    grid-column: 2 / -1;
    text-align: left;
    justify-self: start;
  }
}