@use '../../styles/variables' as *;

.wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: $radius-lg;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;

  thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 10px $s-3;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
}

.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.row {
  cursor: pointer;
  transition: background $transition;
  border-bottom: 1px solid var(--border);

  &:last-child { border-bottom: none; }
  &:hover { background: var(--row-hover); }

  td { padding: 9px $s-3; vertical-align: middle; }
}

.number {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;

  display: flex;
  align-items: center;
  gap: 6px;
}
.numLink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary);

  svg { opacity: 0.55; }
  &:hover { text-decoration: underline; svg { opacity: 1; } }
}
.jira {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary-bg);
  color: var(--primary);
}

.desc {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.assignee { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.assigneeName {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.muted { color: var(--text-muted); white-space: nowrap; }
.num  { color: var(--text); }

.right {
  white-space: nowrap;
  color: var(--text-muted);

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.ago { font-size: 12px; }
.ext {
  display: flex;
  color: var(--text-dim);
  &:hover { color: var(--primary); }
}