.skills.coverage {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    bottom: 0;
    overflow: hidden;
  }

  h1 {
    margin: 0;
  }

  .departments {
    display: flex;
    gap: 10px;

    a {
      padding: 10px;
      border-radius: 5px;
      background-color: #ccc;
      color: #000;
      text-decoration: none;

      &.se {
        background-color: var(--color-blue-100);
      }

      &.de {
        background-color: var(--color-emerald-100);
      }

      &.ai {
        background-color: var(--color-violet-100);
      }

      &:hover,
      &.selected {
        color: #fff;
        background-color: #555;

        &.se {
          background-color: var(--color-blue-600);
        }

        &.de {
          background-color: var(--color-emerald-600);
        }

        &.ai {
          background-color: var(--color-violet-600);
        }
      }
    }
  }

  .table-wrapper {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
    overflow-y: scroll;
  }

  table {
    border-collapse: collapse;
    font-size: 10px;

    th,
    td {
      padding: 10px;
      text-align: left;
      white-space: nowrap;
      background-color: #222;
    }

    tr {
      border-bottom: 1px solid #444;
    }

    .stat {
      text-align: center;
    }

    .proficiency {
      text-align: center;

      &[data-proficiency="1"] {
        background-color: var(--color-emerald-900);
      }

      &[data-proficiency="2"] {
        background-color: var(--color-emerald-700);
      }

      &[data-proficiency="3"] {
        background-color: var(--color-emerald-500);
      }

      &[data-proficiency="4"] {
        background-color: var(--color-emerald-300);
      }
    }

    .fixed {
      position: sticky;
      left: 0;
      top: 0;
      z-index: 1;


      &:first-child {
        z-index: 2;
        border-right: 1px solid #444;
      }
    }
  }
}