@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';

.report-page {
  min-height: 100vh;
  background: $bg;
  padding: 24px;
  padding-bottom: 120px;
}

.search-bar {
  margin-bottom: 20px;

  .search-input {
    background: $card;
    border-radius: $r;
    padding: 20px 24px;
    font-size: 28px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: $shadow-sm;
  }
}

.report-count {
  margin-bottom: 16px;

  text {
    font-size: 24px;
    color: $tx3;
  }
}

.report-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.report-card {
  background: $card;
  border-radius: $r-lg;
  padding: 28px;
  box-shadow: $shadow-sm;

  &:active {
    background: $bd-l;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  &__type {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 600;
    color: $tx;
  }

  &__date {
    font-size: 24px;
    color: $tx3;
  }

  &__indicators {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  &__abnormal {
    font-size: 26px;
    color: $dan;
    font-weight: 600;
  }

  &__normal {
    font-size: 26px;
    color: $acc;
  }

  &__reviewed {
    @include tag($acc-l, $acc);
  }
}