/* Kit Rescue Opportunities — worklist surface.
   Design-system tokens only; no inline styles. Loaded via the app stylesheet glob
   (stylesheet_link_tag :app), so NO view-level link tag (would break Turbo nav). */

.kr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 720px) {
  .kr-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kr-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.kr-kpi-card.kr-kpi-accent { border-left: 3px solid var(--kit); }

.kr-kpi-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.kr-kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}

/* Filters + toolbar */
.kr-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.kr-filter-field { display: flex; flex-direction: column; gap: 4px; }

.kr-filter-field label {
  font-size: 12px;
  color: var(--muted);
}

.kr-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--kit-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.kr-toolbar-count {
  font-size: 13px;
  color: var(--stone);
  font-weight: 500;
}

.kr-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }

.kr-toolbar-selectall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--stone);
  cursor: pointer;
}

/* Two-table layout (single-component headline + multi-component) */
.kr-table-section { margin-bottom: 28px; }

.kr-table-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 4px;
}

.kr-table-explain {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 12px;
  max-width: 720px;
}

/* Worklist table */
.kr-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  transition: transform 0.12s ease;
}

.kr-caret.kr-caret-open { transform: rotate(90deg); color: var(--kit); }

.kr-kit-code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

.kr-recoverable { font-weight: 600; color: var(--green); }
.kr-recoverable.kr-unpriced { color: var(--light); font-weight: 400; }

.kr-summary { font-size: 12px; color: var(--muted); }

.kr-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.kr-chip-ready { background: var(--stone-tint); color: var(--stone); }
.kr-chip-progress { background: var(--blue-tint); color: var(--blue); }

/* Self-recovery chips (kit row): green = dest self-assembles from its own inbound;
   amber = no inbound reaches the dest, an inter-DC transfer is the only fix. */
.kr-chip-recover { background: var(--green-tint); color: var(--green); }
.kr-chip-noinbound { background: var(--amber-tint); color: var(--amber); }

/* Move detail rows (expand) */
.kr-hidden { display: none; }

/* Hidden submittable opportunity_ids[] carriers for a Table 1 component group —
   toggled by the group checkbox; never user-visible (display:none still submits). */
.kr-opp-input { display: none; }

.kr-moves-row > td {
  background: var(--surface-alt);
  padding: 0;
}

.kr-moves-inner { padding: 10px 16px 10px 44px; }

.kr-moves-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.kr-moves-table th,
.kr-moves-table td {
  text-align: left;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border-light);
}

.kr-moves-table th {
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.kr-route { font-family: var(--font-mono); color: var(--stone); }
.kr-route-arrow { color: var(--kit); padding: 0 4px; }

/* Destination-DC inbound cells (moves table) */
.kr-dest-qty { color: var(--ink); font-weight: 500; }
.kr-muted { color: var(--light); }