.grid {
  width: 100%;
  border-collapse: collapse;
  background: #fff;

  th,
  td {
    border-bottom: 1px solid var(--border);
    padding: 5px 8px;
    text-align: left;
    vertical-align: top;
  }

  thead th {
    background: #f0f2f5;
    font-size: 12px;
    color: var(--heading);
    white-space: nowrap;

    a {
      color: inherit;
      text-decoration: none;
    }

    &.sorted {
      background: #e2e8f0;
    }

    &.sortable {
      cursor: pointer;
      user-select: none;

      &:hover {
        background: #e2e8f0;
      }
    }

    &[aria-sort="ascending"]::after {
      content: " ▲";
    }

    &[aria-sort="descending"]::after {
      content: " ▼";
    }
  }

  tfoot th {
    background: #f0f2f5;
  }

  &.deals tbody tr:hover {
    background: #f8fafc;
  }

  &.inputs {
    td {
      padding: 3px 4px;
    }

    input:not([type="checkbox"]),
    select {
      width: 100%;
      min-width: 60px;
    }
  }

  &.comps {
    td {
      vertical-align: middle;
    }

    td.address {
      min-width: 220px;
    }

    input[name$="[notes]"] {
      min-width: 200px;
    }

    input[name$="[url]"] {
      min-width: 160px;
    }
  }

  &.summary {
    th {
      font-weight: normal;
    }

    tr.strong :is(th, td) {
      font-weight: 700;
      font-size: 15px;
    }
  }
}

tr {
  &.grouped td:first-child {
    border-left: 3px solid #8b5cf6;
  }

  &.muted td {
    color: var(--muted);
  }

  &.overridden td {
    background: var(--override);
  }
}

.wide-cell {
  width: 60%;
}

.scroll {
  overflow-x: auto;
  max-height: 480px;
}