/* ============================
   Floating Sensor Dashboard Iframe
   ============================ */
#sensor-dashboard-frame {
  position: absolute;
  top: 80px; /* default position below top bar */
  left: 80px;
  width: 1000px;
  height: 1000px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: none !important;
  overflow: hidden;
  resize: both;
  z-index: 9999;
  cursor: move;
}

#sensor-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  pointer-events: auto;
}

.iframe-window {
  visibility: hidden;
  position: absolute;
  top: calc(
    var(--topbar-top) +
    var(--topbar-height) +
    var(--margin-glass)
  );
  bottom: var(--margin-glass);
  left: 50%;                        /* centered horizontally */
  transform: translateX(-50%);
  width: 1000px;
  height: calc(
    100% - (
      var(--topbar-top) +
      var(--topbar-height) +
      (2 * var(--margin-glass))
    )
  );
  background: var(--background-glass);
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  resize: none;
  z-index: 200001;
  cursor: move;
}

body.has-secondary-top-menu .iframe-window {
  top: calc(
    var(--topbar-top) +
    var(--topbar-height) +
    var(--btn-icon-size-2) +
    (2 * var(--margin-glass))
  );
  height: calc(
    100% - (
      var(--topbar-top) +
      var(--topbar-height) +
      var(--btn-icon-size-2) +
      (3 * var(--margin-glass))
    )
  );
}

@media (max-width: 1024px) {
  .iframe-window {
    position: fixed;
    top: calc(
      var(--topbar-top) +
      var(--topbar-height) +
      var(--margin-glass)
    );
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    height: calc(
      100vh - (
        var(--topbar-top) +
        var(--topbar-height) +
        var(--margin-glass)
      )
    );
    height: calc(
      100dvh - (
        var(--topbar-top) +
        var(--topbar-height) +
        var(--margin-glass)
      )
    );
    max-height: calc(
      100dvh - (
        var(--topbar-top) +
        var(--topbar-height) +
        var(--margin-glass)
      )
    );
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
}