@import "../_common-style/navbar";
@import "../_common-style/sidebar";
@import "../_common-style/footer";

:root {
  --box-shadow-statistic: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

* {
  margin: 0;
  padding: 0;
  border: none;
}

body {
  overflow-x: hidden;
}

.content-group {
  min-height: var(--min-body-height);
}

.content {

  .statistic-content {

    .title {
      width: 100%;
      margin: 40px 0 20px 0;

      h2 {
        font-size: 30px;
        color: #FF00BA;
      }
    }

    .search {
      width: 100%;
      display: grid;
      grid-template-columns: 3fr 1fr 1fr;
      column-gap: 15px;
      margin: 20px 0;

      .search-hostel {
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 8px;

        select {
          transition-delay: 0.5s;
          width: 100%;
          height: 40px;
          border-radius: 6px;
          text-align: center;
          box-shadow: var(--box-shadow-statistic);
        }
      }

      .search-year {
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 8px;

        select {
          transition-delay: 0.5s;
          width: 100%;
          height: 40px;
          border-radius: 6px;
          text-align: center;
          box-shadow: var(--box-shadow-statistic);
        }
      }

      .search-quater {
        padding: 10px 0;
        text-align: center;
        font-size: 18px;
        border-radius: 8px;

        select {
          transition-delay: 0.5s;
          width: 100%;
          height: 40px;
          border-radius: 6px;
          text-align: center;
          box-shadow: var(--box-shadow-statistic);
        }
      }

    }

    .money {
      width: 100%;
      margin: 30px 0;
      display: flex;
      justify-content: space-between;

      .income {
        width: 30%;

        div {
          margin: auto;
          padding: 20px;
          color: #FFFFFF;
          border-radius: 8px;
          text-align: center;
          background: linear-gradient(45deg,#49914E 0%,#B2D553 100%);
          box-shadow: var(--box-shadow-statistic);

          h3 {
            font-size: 23px;
            padding: 0;
            margin: 0;
          }

          p {
            font-size: 20px;
            padding: 0;
            margin: 0;
          }
        }
      }

      .expense {
        width: 30%;

        div {
          margin: auto;
          padding: 20px;
          background: linear-gradient(45deg,#d63939 0%,#FF857B 100%);
          color: #FFFFFF;
          border-radius: 8px;
          text-align: center;
          box-shadow: var(--box-shadow-statistic);

          h3 {
            font-size: 23px;
            padding: 0;
            margin: 0;
          }

          p {
            font-size: 20px;
            padding: 0;
            margin: 0;
          }
        }

      }

      .revenue {
        width: 30%;

        div {
          margin: auto;
          padding: 20px;
          background: linear-gradient(45deg,#216ED8 0%,#FA7799 100%);
          color: #FFFFFF;
          border-radius: 8px;
          text-align: center;
          box-shadow: var(--box-shadow-statistic);

          h3 {
            font-size: 23px;
            padding: 0;
            margin: 0;
          }

          p {
            font-size: 20px;
            padding: 0;
            margin: 0;
          }
        }

      }
    }

    #chart {
      margin: 30px 0;
      width: 100%;

      #chartwithquater {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: fit-content;

        div {
          width: calc(50% - 10px);
          padding: 10px;
          border-radius: 6px;
          box-shadow: var(--box-shadow-statistic);
        }

        #myBarChart {
          height: 100%;
        }

        #myLineChart {
          height: 100%;
        }
      }
    }

    #chart {
      height: fit-content;
      margin: 30px 0;

      #chartwithyear {
        display: block;
        height: fit-content;

        #myBarChartWithYear {
          width: 100%;
          height: 100%;
          margin-bottom: 30px;
        }

        #myLineChartWithYear {
          width: 100%;
          height: 100%;
        }
      }
    }


    .summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 20px;
      margin: 30px 0;

      .top-revenue {
        width: 100%;
        padding: 23px 0;
        text-align: center;
        background: linear-gradient(45deg,#3797A1 0%,#BC805A 100%);
        height: fit-content;
        border-radius: 8px;
        box-shadow: var(--box-shadow-statistic);

        h3 {
          color: #fff;
          font-size: 24px;
          font-weight: 600;
        }

        .content-table {
          border-collapse: collapse;
          margin-top: 25px;
          font-size: 18px;
          width: 100%;
          border-radius: 5px 5px 0 0;
          overflow: hidden;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .content-table thead tr {
          color: #FFFFFF;
          text-align: center;
          font-weight: bold;
        }

        .content-table th,
        .content-table td {
          padding: 12px 15px;
          font-weight: 400;
        }

        .content-table tbody tr {
          color: #FFFFFF;
        }
      }

      .room-infor {
        width: 100%;
        padding: 20px 0;
        height: fit-content;
        text-align: center;
        background: linear-gradient(45deg,#0D95AD 0%,#FFD2C1 100%);
        border-radius: 8px;
        box-shadow: var(--box-shadow-statistic);

        h3 {
          color: #fff;
          font-size: 24px;
          margin-bottom: 20px;
          font-weight: 600;
        }

        p {
          color: #212529;
          font-size: 20px;
        }
      }
    }
  }
}
// Warning
@keyframes blink {
  0% {
    transform: scale(1);
    opacity: 0.25;
  }

  25% {
    opacity: 1;
  }

  50% {
    opacity: 0.25;
  }

  75% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.25;
  }
}

.blink {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  opacity: 0.25;
  background-color: red;
  -webkit-animation: blink 1s infinite;
  -moz-animation: blink 1s infinite;
  -o-animation: blink 1s infinite;
  animation: blink 1s infinite;
}

.blink:after {
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border: 5px solid #ffffff;
}

.content-warning {
  display: flex;
  align-items: center;

  span {
    margin-left: 8px;
    font-size: 1.8rem;
    font-weight: 500;

    a {
      font-style: italic;
      color: rgb(255, 0, 0);
      transition: color 0.1s ease;
      animation: blink 1s infinite;

      &:hover {
        animation: none;
        color: rgb(0, 72, 255);
      }
    }
  }
}