@use "home.variable.module" as home;

.layout-home {
  display: flex;
  flex-direction: column;

  .layout-navbar {
    background-color: home.$navbar-bg-color;
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    display: grid;
    grid-template-columns: 1fr 70% 1fr;
    align-items: center;

    .title-container {

    }

    .right-container {
      margin-right: 10px;
      justify-self: flex-end;

      display: flex;
      justify-content: center;
      gap: 1vw;

      .el-avatar:hover {
        cursor: pointer;
      }
    }

    .layout-menu {
      .el-menu {
        display: flex;
        justify-content: center;
        background-color: home.$navbar-bg-color !important;
        overflow: auto;
        border-bottom: none !important;

        .el-menu-item, .el-sub-menu__title {
          height: home.$navbar-height;
          font-family: "华文楷体", serif;
          font-size: 1rem;
        }

        .el-icon, span {
          color: #FFFFFF;
        }
      }
    }
  }

  .layout-main {
    height: calc(100vh - #{home.$navbar-height});
    overflow: auto;
    background-color: home.$body-bg-color;
    padding: 10px;
  }

  .layout-main::-webkit-scrollbar {
    display: none;
  }

  .common-view {
    height: 100%;

    .body-container {
      height: 100%;
      display: grid;
      grid-template-columns: 1fr minmax(400px, 30%);
      gap: 1vw;

      .left-container {
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .common-statistics {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          justify-items: center;
          gap: 1vw;
        }
      }

      .right-container {
        display: flex;
        flex-direction: column;
        gap: 1vh;

        .common-query {
          align-self: center;

          display: flex;
          gap: 10px;
        }
      }

      .add-new {
        position: absolute;
        right: 1%;
        bottom: 2%;

        width: 50px;
        height: 50px;

        font-size: 1.8rem;
        box-shadow: 0 4px 10px #CFCFCF;
      }
    }

    @media (max-width: 1200px) {
      .body-container {
        grid-template-columns: 1fr 1fr;
      }
    }
  }

  .plan-view {
    .body-container {
      grid-template-columns: 1fr minmax(350px, 30%);
    }
  }

  .common-section {
    height: 100%;
    overflow: auto;
  }

  .card-item {
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 15px;
    box-shadow: 3px 3px 3px #CFCFCF;
  }

  .record-card-item {
    background-color: var(--color-record-card-bg);
    border: 1px solid var(--color-record-card-bg);
    border-radius: 10px;
    // box-shadow: 3px 3px 3px #CFCFCF;
  }

  .el-switch {
    .el-switch__core {
      height: 32px;
      width: 80px;
    }
  }
}

.el-menu--popup-container {
  .el-menu--popup {
    min-width: 8vw;
  }

  .el-menu-item.is-active {
    background-color: home.$menu-active-color !important;
  }
}