@import "../../../../assets/scss/variables";

.visits-management-view-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows:30px auto 48px;
  column-gap: 20px;
  grid-template-areas:
        "title fake-section-top"
        "info status"
        "buttons fake-section-bottom";
}

.fake-section {
  grid-area: fake-section;
}

.visits-management-view-title {
  grid-area: title;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  &-code {
    display: flex;
    justify-content: flex-start;
    max-width: 515px;
    width: 100%;
    align-items: center;

    span {
      margin-right: 5px;
    }

    .view-status {

    }

    p {
      font-size: $title;
      font-weight: $bold;
      color: $title-color;
      margin-right: 27px;

      .view-status {
        font-size: 9px;
        font-weight: $semi-bold
      }
    }
  }

  &-mynote {
    .popup-column {
      margin: 0 0 0 20px;
    }

    p {
      font-size: $subtext-size;
      font-weight: $regular;
      color: $text-color;
    }

    display: flex;
  }
}

.visits-management-view-info {
  .info {
    margin-bottom: 28px;

    .user-form {
      height: 100%;
    }
  }

  &-group {
    height: 126px;

    .btn-with-pop-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .popup-content {
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
        padding: 35px 35px 25px 35px;
        background: $app-background;
        z-index: 50;
        width: 553px;
        max-width: calc(100vw - 40px);
        height: 500px;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 30px;

        &-header {
          border-bottom: 1px solid $gray-border;
          margin-bottom: 20px;
          padding-bottom: 10px;

          p {
            font-size: 1.4rem;
            font-weight: $regular;
            color: $title-color;

            span {
              font-weight: $bold;
            }
          }
        }

        &-body {
          overflow-x: hidden;
          overflow-y: auto;
          display: flex;
          flex-direction: column;

          .person-in-group {
            display: flex;
            justify-content: space-between;
            padding: 0 10px 8px 0;
            border-bottom: 1px dotted $gray-border;

            .status-column {
              min-width: unset;
              width: 100px;
              margin-right: 50px;
            }

            p {
              font-weight: $regular;
              font-size: $info-size;
              color: $title-color;
            }

            &:not(:first-child) {
              padding-top: 8px;


            }
          }

          &::-webkit-scrollbar {
            width: 5px;
            height: 50% !important;
            transform: scaleY(0.5) !important;
          }

          /* Track */
          &::-webkit-scrollbar-track {
            background: #e9f0f9;
            border-radius: 10px;
          }

          /* Handle */
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
          }

          /* Handle on hover */
          &::-webkit-scrollbar-thumb:hover {
            background: transparent;
          }
        }
      }
    }
  }



  &-host {
    height: 143px;

    .message-to-gate {
      overflow-y: auto;
      max-height: 70px;
      font-size: 15px;

      &::-webkit-scrollbar {
        width: 5px;
        height: 50% !important;
        transform: scaleY(0.5) !important;
      }

      /* Track */
      &::-webkit-scrollbar-track {
        background: #e9f0f9;
        border-radius: 10px;
      }

      /* Handle */
      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }

      /* Handle on hover */
      &::-webkit-scrollbar-thumb:hover {
        background: transparent;
      }
    }
  }
}


.visits-management-view-status {
  grid-area: status;

  &-up {
    grid-area: up;

    &-inner {
      .list-column-button{
        &:first-child{
          margin-right:10px!important;
        }
      }
      .button-column {
        width: 103px;
      }

      span {
        font-size: 16px;
        padding-left: 5px;

      }

      display: flex;
      flex-direction: column;
      height: 168px;
      justify-content: space-between;

      @media only screen and (max-width: 1600px) {
        flex-direction: row;

      }

      @media only screen and (max-width: 1099px) {
        flex-direction: column;

      }
    }
  }

  &-bottom {
    &-history {
      &-header {
        p {
          font-size: 14px;
          font-weight: $bold;
          color: $title-color;
          margin-right: 38px;
        }

        display: flex;
      }

      &-body {
        .visitcode {
          font-size: 16px;
          font-weight: $regular;
          color: $title-color;
        }

        .checks-container {
          .check {
            padding-right: 30px;

            &:first-child {

              .check-in {
                background-color: $success-color;

                p {
                  color: $quick-access-background;
                }

              }

              .check-out {
                background-color: $old;

                p {
                  color: $gray-border;
                }

              }

            }

            display: flex;

            margin: 19px 0;

            &-box {
              p {
                font-size: 11px;
                font-weight: $semi-bold;
              }

              display: flex;
              justify-content: space-evenly;
              align-items: center;
              width: 100%;
              max-width: 153px;
              min-width: 85px;
              height: 30px;
              color: $alternate-text-color;
              background-color: transparent;
              border: 1px dotted $alternate-text-color;
            }

            &-in {
              margin-right: 75px;
            }
          }

          max-height: 350px;
          overflow-x: hidden;
          overflow-y: auto;

          &::-webkit-scrollbar {
            width: 5px;
            height: 50% !important;
            transform: scaleY(0.5) !important;
          }

          /* Track */
          &::-webkit-scrollbar-track {
            background: #e9f0f9;
            border-radius: 10px;
          }

          /* Handle */
          &::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 10px;
          }

          /* Handle on hover */
          &::-webkit-scrollbar-thumb:hover {
            background: transparent;
          }
        }

        display: flex;
        justify-content: space-around;
        flex-direction: column;
      }
    }
  }

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 222px auto;
  grid-template-areas:
          "up"
          "bottom";
  row-gap: -5px;

}


@media only screen and (max-width: 1600px) {
  .visits-management-view-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
     "title"
     "status"
      "info"
  "buttons";
  }
}

// ---------------------------------------------------------------------
// Mobile fixes (≤425px)
// ---------------------------------------------------------------------
@media only screen and (max-width: 425px) {

  // Title row: code block + note block were fighting for space with no
  // wrap allowance. Let them stack instead of overflowing.
  .visits-management-view-title {
    flex-wrap: wrap;
    row-gap: 10px;

    &-code {
      max-width: 100%;
    }

    &-mynote {
      width: 100%;
      justify-content: flex-end;
    }
  }

  // Status history header: the label uses text-nowrap and the status
  // pill was given a fixed 400px flex-basis (likely as an inline style
  // via the `flex` prop on StatusColumn). Force it to shrink to fit.
  // The !important is there specifically to beat an inline style if
  // that's how the prop is implemented.
  .visits-management-view-status-bottom-history-header {
    flex-wrap: wrap;
    row-gap: 8px;

    p {
      margin-right: 0;
      white-space: normal;
    }

    .status-column {
      flex: 1 1 100% !important;
      max-width: 100% !important;
    }
  }

  // Check-in/check-out pairs: fixed 75px gap plus up to 153px boxes on
  // each side no longer fits. Let them wrap and tighten the spacing.
  .checks-container {
    .check {
      flex-wrap: wrap;
      row-gap: 8px;
      padding-right: 0;
    }

    .check-box {
      max-width: 130px;
      min-width: 70px;
    }

    .check-in {
      margin-right: 15px;
    }
  }

  // Group popup: fixed 553px width guaranteed to overflow below that
  // width. Anchor it to the viewport instead of the button.
  .visits-management-view-info-group {
    .btn-with-pop-container .popup-content {
      width: auto;
      max-width: calc(100vw - 32px);
      left: 16px;
      right: 16px;
      padding: 20px 20px 15px 20px;

      &-body .person-in-group {
        flex-wrap: wrap;
        row-gap: 6px;

        .status-column {
          margin-right: 0;
        }
      }
    }
  }
}