atst/styles/sections/_reports.scss

.portfolio-reports {
  .estimate-warning {
    margin-top: $gap * 3;
    margin-bottom: $gap * 3;
  }

  .reporting-section-header {
    display: flex;
    align-items: baseline;
    &__header {
      margin-right: $gap;
    }
    &__subheader {
      @include small-copy;
    }
  }

  .jedi-clin-funding {
    $insufficient-gradient: repeating-linear-gradient(
      45deg,
      $color-secondary-dark,
      $color-secondary-dark 10px,
      $color-secondary-darkest 11px,
      $color-secondary-darkest 14px
    );

    $graph-bar-height: 2rem;

    padding-top: $gap * 3;
    padding-bottom: $gap * 3;

    &__clin-wrapper {
      border-bottom: 1px solid $color-gray-light;
      margin-bottom: $gap * 3;
      padding-bottom: $gap * 3;
    }
    > div:nth-last-child(2) {
      margin-bottom: 0;
    }

    &__header {
      margin: 0;
    }

    &__subheader {
      @include small-copy;
      margin: 0;
    }

    &__graph {
      width: 100%;
      height: $graph-bar-height;
      margin-top: $gap * 2;
      margin-bottom: $gap * 2;
      display: flex;

      &-bar {
        height: 100%;
        display: block;
        float: left;
        margin-right: $gap / 2;

        &:last-child {
          margin-right: 0;
        }

        &--invoiced {
          background: $color-green;
        }
        &--estimated {
          background: $color-green-lighter;
        }
        &--remaining {
          background: $color-primary-darkest;
        }
        &--insufficient {
          background: $insufficient-gradient;
        }
      }

      &-values {
        display: flex;
      }
    }

    &__meta {
      margin-right: $gap * 5;

      &-header {
        @include small-copy;
        margin-bottom: 0;
        display: flex;
        align-items: center;
      }

      &-key {
        height: $graph-bar-height;
        width: $graph-bar-height;
        margin-right: $gap / 2;

        &--invoiced {
          background: $color-green;
        }
        &--estimated {
          background: $color-green-lighter;
        }
        &--remaining {
          background: $color-primary-darkest;
        }
        &--insufficient {
          background: $insufficient-gradient;
        }
      }
      &-value {
        margin-bottom: 0;
        line-height: 1.2;
      }
    }
  }

  .reporting-summary-item {
    border-right: 1px solid $color-gray-light;
    margin-right: $gap * 3;
    padding-right: $gap * 3;
    &:last-child {
      border-right: none;
      margin-right: 0;
      padding-right: 0;
    }
    &__header {
      margin: 0;
      &-icon {
        margin: 0;
        padding: 0;
      }
    }
    &__value {
      font-size: $lead-font-size;
    }
  }

  .reporting-expended-funding {
    &__header {
      margin: 0;
    }
    &__content {
      padding: 0;
      border-top: 1px solid $color-gray-lighter;
    }
  }

  .reporting-spend-table {
    &__env-row {
      &-label {
        margin-left: $gap * 5;
      }
      &--last {
        & > td {
          border-bottom: 1px solid black;
        }
        &:last-of-type {
          & > td {
            border-bottom: none;
          }
        }
      }
    }
  }
}