table {
  background: #f2f2f2;
  border-collapse: collapse;
  font-size: smaller;
  margin: $article-gutter 0;
  min-width: 50%
}

caption {
  /* TODO sticky as well? */
  color: gray;
  font-weight: bold;
  text-align: left
}

thead th {
  /* TODO bottom border only (this saves padding from right and left) +  fade bottom (css image-mask) */
  position: sticky;
  top: 0; /* magic: navbar height */
  z-index: 1
}

/* TODO add some borders in the same color as the background color, so printing without
   background looks table-esque as well */

table,
th,
td {
  border: 0;
}

tr {
  border-top: 1px solid white;
}

th {
  background: $secondary-color;
  color: white;
}

th a {
  color: white;
}

th,
td {
  padding: 0.5rem 2rem 0.5rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

th:last-child:not(:only-child),
td:last-child:not(:only-child) {
  padding-right: 0.5rem;
}

tfoot td {
  background: none;
}

.matrix td {
  height: 2em !important;
  padding: 0.2em;
  text-align: right;
  width: 2em !important;
}

.matrix tr {
  border: none;
}


@media (max-width: 640px) {

  .cards {
    background: initial;

    thead {
      display: none
    }

    /* card */
    tr {
      display: block;
      margin: 0 0 2rem 0;
      overflow: hidden
    }

    /* card row */
    tbody td,
    tbody .date,
    tbody .number {
      display: block;
      overflow: hidden;
      text-align: left !important;
      width: 100%;

      &[data-label]::before:not(:first-child) {
        content: attr(data-label);
        display: inline-block;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        width: 10rem
      }
    }

    th:first-child,
    td:first-child {
      background: $secondary-color;
      color: white;
      overflow: auto;
      text-overflow: initial;
      white-space: nowrap;
      width: 100%
    }

    th:first-child a,
    td:first-child a {
      color: white
    }

    td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-weight: bold;
      overflow: hidden
    }
  }
}