/*
 * Browser-like application zoom. A percentage width already follows CSS zoom
 * layout rules; JavaScript compensates the viewport-unit height explicitly so
 * the application still occupies the complete physical viewport.
 */
[data-dashboard-page-zoom] {
  --dashboard-page-zoom: 1;
  --dashboard-page-zoom-inverse: 1;
  zoom: var(--dashboard-page-zoom);
  transform-origin: top left;
}

@supports not (zoom: 1) {
  [data-dashboard-page-zoom] {
    zoom: 1;
    transform: scale(var(--dashboard-page-zoom));
  }
}

.settings-dialog[data-dashboard-overlay-zoom] {
  width: min(1600px, calc(var(--dashboard-overlay-vw, 100vw) - 24px));
  height: min(1000px, calc(var(--dashboard-overlay-vh, 100dvh) - 24px));
  max-height: none;
  zoom: var(--dashboard-page-zoom);
}

.settings-dialog[data-dashboard-overlay-zoom][data-settings-maximized="true"] {
  width: var(--dashboard-overlay-vw, 100vw);
  max-width: none;
  height: var(--dashboard-overlay-vh, 100dvh);
  max-height: none;
}

@supports not (zoom: 1) {
  .settings-dialog[data-dashboard-overlay-zoom] {
    zoom: 1;
    transform: scale(var(--dashboard-page-zoom));
    transform-origin: center;
  }
}

/* These wrappers remain neutral layout containers; zoom belongs to the app. */
.dashboard-scale-viewport,
.dashboard-scale-surface {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.dashboard-scale-viewport {
  overflow: hidden;
  background: var(--bg);
}