/* Match the app's desktop density to the team's preferred 75% browser view. */
@media (min-width: 1200px) {
  html.precise-app-density {
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: var(--ct-body-bg, #303842);
  }

  html.precise-app-density body {
    width: 133.333333vw;
    min-width: 133.333333vw;
    height: 133.333333vh;
    min-height: 133.333333vh;
    overflow: auto;
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform-origin: top left;
    -webkit-transform-origin: top left;
    background-color: var(--ct-body-bg, #303842);
  }

  html.precise-app-density body > .wrapper {
    width: 100%;
    min-width: 100%;
    min-height: 133.333333vh;
    background-color: var(--ct-body-bg, #303842);
  }

  html.precise-app-density #fleet-app,
  html.precise-app-density #fleet-etas-app,
  html.precise-app-density #ai-coworker-app {
    right: auto;
    width: 133.333333vw;
  }

  html.precise-app-density .ai-coworker-messages {
    left: calc(50% - 66.666667vw);
    right: calc(50% - 66.666667vw);
  }

  /* Fixed overlays must use the effective viewport created by the 75% density. */
  html.precise-app-density .modal,
  html.precise-app-density .modal-backdrop {
    width: 133.333333vw !important;
    max-width: 133.333333vw !important;
    height: 133.333333vh !important;
    max-height: 133.333333vh !important;
  }

  html.precise-app-density .modal-backdrop {
    box-shadow: 0 0 0 200vmax #343a40 !important;
  }

  html.precise-app-density #raw-company-data-modal .raw-company-data-modal-dialog {
    width: 128vw !important;
    max-width: 128vw !important;
  }

  html.precise-app-density #raw-company-data-modal .modal-body {
    max-height: calc(133.333333vh - 160px) !important;
  }

  html.precise-app-density #raw-company-data-modal #raw-company-data-table-wrap {
    max-height: 90.666667vh !important;
  }

  html.precise-app-density #fullscreenVesselModal .modal-dialog,
  html.precise-app-density #fullscreenVesselModal .modal-content,
  html.precise-app-density #fullscreenPositionListModal .modal-dialog,
  html.precise-app-density #fullscreenPositionListModal .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
  }

  html.precise-app-density .avoid-area-modal[data-aa-state="open"] {
    right: auto !important;
    bottom: auto !important;
    width: 133.333333vw !important;
    max-width: 133.333333vw !important;
    height: 133.333333vh !important;
    max-height: 133.333333vh !important;
  }

  html.precise-app-density .navbar-custom .topbar-menu {
    position: relative;
    z-index: 50;
    flex-wrap: nowrap !important;
    pointer-events: auto;
  }

  html.precise-app-density #light-dark-mode {
    position: relative;
    z-index: 51;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: var(--ct-topbar-height);
    padding: 0 !important;
    box-sizing: border-box;
    pointer-events: auto !important;
    cursor: pointer;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.precise-app-density #light-dark-mode i {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 100%;
    height: 100%;
    margin: 0;
    line-height: var(--ct-topbar-height);
    font-size: 22px !important;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html.precise-app-density[data-bs-theme="light"] #light-dark-mode .precise-theme-icon-moon,
  html.precise-app-density[data-bs-theme="dark"] #light-dark-mode .precise-theme-icon-sun {
    opacity: 1;
    visibility: visible;
  }
}