@import "color";

.logo-navbar {
  width: 100px;
}

.nav-item {
  border: 2px solid $primary;
}

.nav-item:hover {
  background-color: $quaternary;
  border: 2px solid $quaternary;
  border-radius: 6px 6px;
}

.nav-item.active {
  border: 2px solid $secondary;
  border-radius: 6px 6px;
  background-color: $quaternary;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}

.first-nav div ul li.nav-separator {
  border: 1px solid $secondary;
}

.second-nav div ul li.nav-separator {
  border: 1px solid $tertiary;
}

.first-nav {
  overflow-x: scroll;
  min-height: 60px;
  background-color: $primary;
}

.second-nav {
  overflow-x: scroll;
  background-color: $secondary;
  top: 60px;
}

.navbar {
  div {
    ul {
      li {
        a {
          color: rgb(255, 255, 255) !important;
        }
      }
    }
  }
}

.nav-subitem {
  border: 2px solid $secondary;
}

.nav-subitem:hover {
  background-color: $quinary;
  border: 2px solid $quinary;
  border-radius: 6px 6px;
}

.nav-subitem.active {
  border: 2px solid $tertiary;
  border-radius: 6px 6px;
  background-color: $quinary;
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
}

#navbarToggler,
#navbarToggler2 {
  overflow-y: scroll;
}

.WIP {
  height: 300px;
}

div svg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* All div elements with id starting with "plot-" */
div[id^="plot-"] {
  height: 400px;
  position: relative;
  overflow: hidden;
  /* Avoid overflow */
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    max-width: 100%;
    max-height: 100%;
    display: block;
  }
}

/* If id starts with "plot-" and ends with "-cameraView" use taller height (override by being later) */
div[id^="plot-"][id$="_cameraView"] {
  min-height: 400px;
  /* o una height coerente alla tua configurazione */
  position: relative; // add
  overflow: hidden;

  svg {
    display: block; // add
    max-width: 100%;
    height: auto; // add
  }
}

.plot-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  text-align: center;
  color: red;
  font-weight: bold;
}

.placeholder-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  text-align: center;
  color: gray;
  font-style: italic;
}
