.menu-container {
  --menu-text: #f3f8ff;
  --menu-text-soft: rgba(243, 248, 255, 0.82);
  --menu-border: rgba(167, 199, 255, 0.34);
  --menu-header-bg: linear-gradient(
    120deg,
    #10224f 0%,
    #1b3b86 55%,
    #2c5bc1 100%
  );
  --menu-body-bg: linear-gradient(
    180deg,
    #0b183f 0%,
    #102860 45%,
    #173777 100%
  );
  --menu-item-hover: linear-gradient(
    135deg,
    rgba(99, 179, 255, 0.16),
    rgba(68, 121, 255, 0.24)
  );
  --menu-item-active: linear-gradient(
    135deg,
    rgba(145, 211, 255, 0.22),
    rgba(88, 148, 255, 0.34)
  );
  --menu-glow: 0 0 24px rgba(81, 159, 255, 0.36);
  --menu-glow-soft: 0 0 18px rgba(81, 159, 255, 0.2);
}

.page {
  position: relative;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.menu-container {
  transition: all ease-in 0.15s;
  overflow: hidden;
}

.menu-header {
  color: var(--menu-text);
  padding: 20px 10px 20px 10px;
  height: 60px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    var(--menu-glow-soft);
}

.menu-item-list {
  overflow-y: overlay;
  display: flex;
  gap: 2px;
  flex-direction: column;
  padding: 20px 10px 20px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.menu-item-list .menu-item {
  text-decoration: none;
  color: var(--menu-text-soft);
  transition:
    background-color ease-in 0.2s,
    color ease-in 0.2s,
    box-shadow ease-in 0.2s;
}

.menu-item-list .menu-item .menu-icon {
  width: 36px !important;
  min-width: 36px !important;
  text-align: center;
}

.menu-toggler {
  border: 1px solid var(--menu-border);
  font-size: 20px;
  margin-right: 20px;
  color: var(--menu-text);
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(116, 194, 255, 0.18),
    rgba(67, 125, 255, 0.26)
  );
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(9, 23, 59, 0.36),
    var(--menu-glow-soft);
}

.menu-toggler:hover {
  box-shadow:
    0 10px 28px rgba(9, 23, 59, 0.45),
    var(--menu-glow);
}

main {
  display: flex;
  flex-direction: column;
}

/* container versão mobile */
@media (max-width: 719px) {
  .page {
    flex-direction: row;
  }

  .menu-container {
    width: 100%;
    height: 60px;
    max-height: 60px;
    position: absolute;
    overflow: visible;
    z-index: 1021;
  }

  main {
    position: absolute;
    top: 60px;
    width: 100vw !important;
    height: calc(100vh - 60px) !important;
    height: calc(100dvh - 60px) !important;
    max-height: calc(100vh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
  }

  .menu-container .menu-item-list {
    max-height: 60vh;
    max-height: 60dvh;
    transition: all ease-in 0.3s;
    padding: 10px 20px 20px 10px;
  }

  .menu-container.collapsed .menu-item-list {
    max-height: 0px !important;
    padding: 0px !important;
  }

  .menu-item-list .menu-item {
    border: solid rgba(167, 199, 255, 0.2) 1px;
    padding: 10px;
    border-radius: 10px;
  }

  .menu-item-list .menu-item.active {
    color: var(--menu-text);
    border: solid var(--menu-border) 1px;
    background: var(--menu-item-active);
    box-shadow: var(--menu-glow-soft);
  }
}

/* container versão desktop */
@media (min-width: 720px) {
  .menu-container {
    max-width: 300px;
    height: calc(100vh - 4px);
    max-height: calc(100vh - 4px);
    display: flex;
    flex-direction: column;
    margin-left: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 8px;
    border: 1px solid rgba(145, 193, 255, 0.25);
    box-shadow:
      0 10px 24px rgba(6, 15, 38, 0.28),
      var(--menu-glow-soft);
    z-index: 1021;
  }

  main {
    height: 100vh !important;
    max-height: 100vh !important;
    position: absolute;
    width: calc(100vw - 60px) !important;
    max-width: calc(100vw - 60px) !important;
    left: 60px;
  }

  .menu-container.collapsed:not(:hover) {
    max-width: 60px !important;
  }

  .menu-item-list {
    flex-grow: 1;
    gap: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .menu-item-list::-webkit-scrollbar {
    display: none;
  }

  .menu-item-list .menu-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    text-wrap: nowrap;
    min-height: 40px;
    border: solid rgba(167, 199, 255, 0.24) 1px;
    border-radius: 8px;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0)
    );
  }

  .menu-item-list .menu-item:hover {
    color: var(--menu-text);
    background: var(--menu-item-hover);
    box-shadow: var(--menu-glow-soft);
  }

  .menu-item-list .menu-item.active {
    color: var(--menu-text);
    background: var(--menu-item-active);
    box-shadow: var(--menu-glow);
  }

  .menu-item-list .menu-item .menu-text {
    margin-right: 10px; /* para evitar que o texto fique colado na borda direita quando o menu estiver expandido */
  }
}