body.preload .menu,
body.preload .menu-tabs,
body.preload main.content {
  transition: none !important;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 100;
}

.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-height);
  z-index: 100;
}

.menu {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--menu-width);
  height: calc(100% - var(--header-height) - var(--footer-height));
  transition: transform 0.3s ease;
  z-index: 90;
}

body.menu-collapsed .menu {
  transform: translateX(-100%);
}

body.menu-collapsed .menu-tabs {
  left: 0;
}

main.content {
  margin-top: var(--header-height);
  margin-bottom: var(--footer-height);
  margin-left: calc(var(--menu-width) + var(--menu-toggle-width));
  height: calc(100vh - var(--header-height) - var(--footer-height));
  transition: margin-left 0.3s ease;
}

body.menu-collapsed main.content {
  margin-left: var(--menu-toggle-width);
}