table {
  margin: 1rem 0;

  caption {
    font-weight: bold;

    a {
      font-weight: initial;
    }
  }

  th,
  td {
    padding: 1em 0.5em;
  }

  th::first-letter,
  th a::first-letter,
  :lang(en) :is(th, th a) {
    text-transform: capitalize;

    .unit {
      text-transform: initial;
    }
  }

  th.action {
    background: var(--color-blue-600);
  }

  tbody {
    tr:nth-child(even of :not(.no-display)) {
      background: var(--even-row-color);
      &:hover {
        background: var(--hover-row-color);
      }
    }

    tr:nth-child(odd of :not(.no-display)) {
      background: var(--odd-row-color);
      &:hover {
        background: var(--hover-row-color);
      }
    }

    th {
      text-align: left;
    }

    td.num {
      text-align: right;
    }
  }

  tfoot {
    text-align: center;
    margin: 1rem 0;
  }

  td.action {
    padding: 0;
    text-align: center;
  }

  td.action a,
  td.action form {
    display: inline-block;
    padding: 0.5rem;

    &:hover {
      color: var(--color-blue-600);
    }
  }

  td.action button {
    background: transparent;
  }

  td:has(.warning, .error) {
    text-align: center;
  }
}

bl-row,
.bl-row {
  margin: 1rem 0 1.5rem;
  padding: 2rem 1rem 1rem;
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 4px 8px #ddd;

  &:hover {
    background: var(--hover-row-color);
  }

  > * {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1rem;
    justify-content: left;
    vertical-align: middle;
  }

  > *::before {
    content: attr(title);
    color: black;
    text-transform: capitalize;
    font-weight: bold;
    text-align: right;
  }

  .value {
    text-align: left;
  }
}

bl-thead,
thead {
  bl-row,
  tr {
    color: var(--thead-color);
    background: var(--thead-background-color);
    background: var(--thead-background-color);
    font-weight: bold;
    text-align: center;

    > *:first-letter {
      text-transform: capitalize;
    }
  }

  th {
    color: var(--color-gray-50);
    background: var(--color-gray-700);
    text-align: center;

    &.new {
      background: transparent;

      a {
        text-transform: uppercase;
        font-weight: normal;
      }
    }
  }

  th:first-child {
    border-radius: 4px 0 0 0;
  }

  th:last-child {
    border-radius: 0 4px 0 0;
  }

  th:only-child {
    border-radius: 4px 4px 0 0;
  }

  td::first-letter {
    text-transform: capitalize;
  }
}

tbody,
bl-tbody {
  :is(tr, bl-row):nth-child(odd) {
    background: var(--odd-row-color);
  }
}

table.compact :is(th, td) {
  padding: 0.5em 1em;
}

table.bom {
  margin-top: 2rem;
}

#power_path-channels {
  table {
    margin: 0;
    height: fit-content;
  }
}

@media (min-width: 1200px) {
  thead,
  bl-thead,
  tbody,
  bl-tbody,
  tfoot,
  bl-tfoot {
    display: contents;
  }

  bl-row,
  tr.bl-row {
    display: table-row;
    margin: 0;
    padding: 0;
    box-shadow: none;

    > form > *,
    > * {
      display: table-cell;
      margin: 0;
      padding: 0.5em;
      text-align: center;

      &:nth-child(1) {
        text-wrap: balance;
      }
    }

    > *::before {
      display: none;
    }
  }
}