/* Global box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margins/paddings and set full height */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* hides any horizontal scroll */
}

/* Full width navbar background */
nav {
  background-color: #333;
  width: 100%;      /* fill viewport width */
  padding: 10px 0;  /* vertical padding only */
  box-sizing: border-box;
}

/* Inner container inside nav to constrain content width & center */
nav .nav-container {
  max-width: --webkit-fill-available;  /* your desired max width */
  height: 3vh;
  margin: 0 auto;    /* center horizontally */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;   /* horizontal padding inside container */
}

/* Left side nav buttons */
nav .nav-left button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1em;
  padding: 5px 10px;
  margin-right: 10px;
  font-family: Arial, sans-serif;
  transition: color 0.2s ease;
}

nav .nav-left button:hover,
nav .nav-left button.active {
  text-decoration: underline;
  font-weight: bold;
  color: #0af;
}

/* Right side report link */
nav .nav-right {
  color: white;
  font-size: 0.9em;
}

nav .nav-right a {
  color: #0af;
  text-decoration: underline;
}

nav .nav-right a:hover {
  color: #08c;
}

/* Wrap main content in a container */
#mainContent {
  position: relative;
  max-width: 100%;  /* same as nav .nav-container */
  margin: 0 auto;    /* center horizontally */
  height: calc(100vh - 5vh);
  overflow-y: hidden;  /* allow vertical scroll if needed */
  width: 100%;       /* take full width up to max-width */
}

/* Iframe fills mainContent fully */
#mainIframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  overflow-y: auto;
}