@import "/style/theme.less";

page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .padder {
    width: 100vw;
    height: 30rpx;
    display: block;
  }
  .card {
    margin: 0rpx 30rpx;
    margin-bottom: 20rpx;
    background-color: white;
    border-radius: 10rpx;
    box-shadow: 0px 2px 12px 2px rgba(242, 243, 244, 1);
    position: relative;
    position: relative;
    &-essential {
      padding: 14rpx 30rpx 30rpx 30rpx;
      font-size: 24rpx;
      position: relative;
      font-size: 28rpx;
      line-height: 40rpx;
      &.short {
        padding-bottom: 0;
      }

      .title {
        color: black;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 56rpx;
        .property {
          padding: 0 12rpx;
          border-radius: 6rpx;
          border: @border;
          font-size: 20rpx;
          display: inline-block;
          line-height: 40rpx;
          margin-left: 8rpx;
          &.normal {
            border-color: #52c41a;
            color: #52c41a;
          }
          &.emergency {
            border-color: @mainColor;
            color: @mainColor;
          }
          &.random {
            border-color: #017ff8;
            color: #017ff8;
          }
          &.review {
            border-color: #de1c24;
            color: #de1c24;
          }
        }
      }
      .status {
        font-weight: 400;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &-icon {
          width: 28rpx;
          height: 28rpx;
        }
        &-text {
          margin-right: 8rpx;
        }
        &.create {
          color: @create;
        }
        &.pending {
          color: @mainColor;
        }
        &.done,
        &.approved {
          color: @done;
        }
        &.denied {
          color: @denied;
        }
      }
      .row {
        margin-top: 12rpx;
        .row-item {
          color: @tx1;
          .label {
            flex: 0 0 30%;
          }
          .value {
            flex: 1;
          }
        }
      }
      .textarea {
        .label {
          color: @tx2;
          font-weight: 400;
          font-size: 28rpx;
          margin-bottom: 8rpx;
          margin-top: 10rpx;
        }
        &-input {
          padding: 16rpx 24rpx;
          min-height: 160rpx;
          border-radius: 12rpx;
          border: 1px solid #dedede;
        }
      }
    }
    .img-cal {
      flex: 0 0 40rpx;
      height: 40rpx;
    }
    .extra {
      border-top: @border;
      padding: 12rpx 0rpx;
      line-height: 40rpx;
      font-size: 20rpx;
      justify-content: flex-start;
      &-item {
        flex: 0 0 33%;
        justify-content: center;
        padding: 0 30rpx;
        &:nth-child(3n + 1) {
          border-right: @border;
        }
        &:nth-child(3n) {
          border-left: @border;
        }
        .label {
          color: @tx3;
          margin-right: 8rpx;
          white-space: nowrap;
        }
        .value {
          color: @tx2;
          white-space: nowrap;
        }
      }
    }
    &-title {
      color: #101010;
      font-weight: 400;
      font-size: 32rpx;
      position: relative;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      &:before {
        content: "";
        width: 8rpx;
        height: 32rpx;
        display: inline-block;
        vertical-align: middle;
        background-color: @mainColor;
        border-radius: 4rpx;
        margin-right: 16rpx;
      }
    }
    .box {
      margin: 0 30rpx;
      padding: 16rpx 0;
      line-height: 56rpx;
      font-size: 28rpx;
      &:not(:last-child) {
        border-bottom: @border;
      }
      .date {
        flex: 1;
      }
      .row {
        width: 100%;
        &.disabled {
          .value {
            background-color: #f4f4f4;
            &.active {
              background-color: @mainColor;
            }
          }
          .save {
            background-color: #f4f4f4;
            color: @tx3;
          }
        }
        .input {
          flex: 1;
        }
        .save {
          background-color: @mainColor;
          color: white;
          padding: 8rpx 16rpx;
          line-height: 56rpx;
          font-size: 28rpx;
          border-radius: 10rpx;
        }
        &-photo-item {
          flex: 0 0 30%;
          aspect-ratio: 1.384;
          margin-bottom: 24rpx;
          position: relative;
          background-color: #f7f8fa;
          .photo {
            width: 100%;
            height: 100%;
          }
          &:nth-child(3n + 2) {
            margin: 0 30rpx 24rpx 30rpx;
          }
          &-remove {
            position: absolute;
            right: -8rpx;
            top: -8rpx;
            .img {
              width: 30rpx;
              height: 30rpx;
            }
          }
          &.upload {
            border: 2rpx dashed #dedede;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
          }
        }
      }
      .label {
        color: @tx1;
        flex: 0 0 30%;
      }
      &-item > .label {
        flex: 0 0 40%;
      }
      .value {
        color: @tx3;
        border: @border;
        border-radius: 10rpx;
        padding: 0 16rpx;
        white-space: nowrap;
        &.active {
          border-color: @mainColor;
          background-color: @mainColor;
          color: white;
        }
      }
    }
  }
  .btn {
    padding: 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    &-item {
      flex: 1;
      &.save {
        background-color: white;
        color: @mainColor;
        border: 2rpx solid @mainColor;
        margin-right: 10rpx;
        &.disabled {
          color: @mainColor;
          opacity: 0.4;
        }
      }
      &.submit {
        background-color: @mainColor;
        &.disabled {
          opacity: 0.4;
        }
      }
    }
  }
}

.popup {
  min-height: 60vh;
  padding: 0 30rpx env(safe-area-inset-bottom) 30rpx;
  &.short {
    min-height: 28vh;
  }
  &-title {
    line-height: 96rpx;
    font-size: 28rpx;
    color: @tx2;
    .popup-txt {
      font-size: 32rpx;
      font-weight: 400;
    }
  }
  &-textarea-input {
    padding: 16rpx 24rpx;
    min-height: 240rpx;
    border-radius: 12rpx;
    border: 1px solid #dedede;
    width: 93%;
  }
}
.safe-padder {
  padding: 0 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100vw;
  .btn-submit {
    background-color: @mainColor;
    border-radius: 45rpx;
  }
}

.t-dialog__footer > .t-button--text.t-button--primary {
  color: @mainColor;
}