/* inbound tab styles — owned by the inbound builder. Selectors are prefixed
   .inbound-, except where they extend the shared .table, .pill and .rail
   shapes already defined in components.css. Colours come from tokens.css only. */

.inbound-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

/* ------------------------------------------------------------- controls */

.inbound-controls {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}

.inbound-controls .tabstrip {
  flex: 1 1 auto;
  min-width: 0;
}

.inbound-controls .field-label {
  margin-left: auto;
}

/* ---------------------------------------------------------------- table */

.inbound-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.inbound-row {
  cursor: pointer;
}

.inbound-row.is-selected td {
  background: var(--selected-fill);
}

.inbound-n {
  color: var(--muted);
  width: 40px;
}

.inbound-stamp {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}

/* Grey is "not called yet" and reads as a dash. It is deliberately the same
   weight as the coloured bands so an uncalled lead is never mistaken for a
   fast one. */
.inbound-speed {
  font-variant-numeric: tabular-nums;
}

.inbound-next {
  line-height: var(--lh-tight);
}

.inbound-next.is-urgent {
  color: var(--red);
  font-weight: var(--fw-semibold);
}

/* The flex box sits on a span inside the cell. A <td> set to display:flex
   leaves the table's column grid and every following cell wraps underneath it
   instead of holding its own column. */
.inbound-actions { white-space: nowrap; }

.inbound-actions-cell {
  display: flex;
  gap: var(--s1);
  align-items: center;
  white-space: nowrap;
}

.inbound-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s2) var(--s1);
}

/* -------------------------------------------------------------- routing */

.inbound-routing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}

/* ----------------------------------------------------------------- rail */

.inbound-facts {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.inbound-fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.inbound-fact .rail-kv-value.is-urgent {
  color: var(--red);
  font-weight: var(--fw-semibold);
}

.inbound-rail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.inbound-to-discussion:not(:disabled) {
  color: var(--green);
  background: var(--green-tint);
  border-color: var(--green-tint);
}

.inbound-phone {
  line-height: var(--lh-base);
}

.inbound-log {
  padding: var(--s2) 0;
  border-top: 1px solid var(--border);
  line-height: var(--lh-tight);
}

/* -------------------------------------------------------------- playbook */

.inbound-play-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.inbound-play-row > div {
  flex: 1 1 auto;
  min-width: 0;
}

.inbound-play-when {
  flex: 0 0 auto;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  background: var(--slate-tint);
  color: var(--slate);
  font-size: var(--fs-pill);
  white-space: nowrap;
}

.inbound-play-row:first-child .inbound-play-when {
  background: var(--blue-tint);
  color: var(--primary);
}