/* LPMS R005.0.22 - Dynamische Viewport-Neuberechnung
   Globaler Schutz gegen veraltete iOS/Safari-Layoutbreiten nach Rotation.
   Die bestehenden Seitenlayouts bleiben fachlich und optisch unveraendert. */

html.lpms-viewport-sync,
html.lpms-viewport-sync body {
  min-width: 0;
  max-width: 100%;
}

html.lpms-viewport-sync body {
  overflow-x: hidden;
}

/* Auf Touchgeraeten wird die oberste LPMS-Arbeitsflaeche an die tatsaechlich
   sichtbare Visual-Viewport-Breite gebunden. Das verhindert, dass nach einer
   Drehung die alte Landscape-Breite rechts aus dem Portrait-Viewport ragt. */
html.lpms-touch-viewport .portal-app,
html.lpms-touch-viewport .viewer-shell {
  width: min(100%, var(--lpms-visual-viewport-width, 100vw));
  max-width: var(--lpms-visual-viewport-width, 100vw);
  min-width: 0;
}

html.lpms-touch-viewport .portal-main-panel,
html.lpms-touch-viewport .portal-header,
html.lpms-touch-viewport .portal-filterbar,
html.lpms-touch-viewport .portal-kpi-grid,
html.lpms-touch-viewport .portal-content-scroll,
html.lpms-touch-viewport .viewer-main,
html.lpms-touch-viewport .viewer-toolbar,
html.lpms-touch-viewport .viewer-preview {
  min-width: 0;
  max-width: 100%;
}

/* Spiegelung des zentralen 1180px-Portal-Breakpoints anhand der realen
   Visual-Viewport-Breite. Dadurch wird die Portrait-Geometrie sofort aktiv,
   auch wenn Safari seinen CSS-Layout-Viewport erst leicht verzoegert aktualisiert. */
html.lpms-touch-viewport.lpms-vw-lte-1180 .portal-app {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

html.lpms-touch-viewport.lpms-vw-lte-1180 .portal-filterbar {
  grid-template-columns: 1fr 1fr;
}

html.lpms-touch-viewport.lpms-vw-lte-1180 .portal-filterbar .filter-group.wide {
  grid-column: 1 / -1;
}

html.lpms-touch-viewport.lpms-vw-lte-1180 .media-grid {
  grid-template-columns: 1fr;
}

html.lpms-touch-viewport.lpms-vw-lte-1180 .media-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Schmale Tablets/Smartphones: dieselbe bereits vorhandene Portalstruktur
   erzwingen, ohne einen Reload zu benoetigen. */
html.lpms-touch-viewport.lpms-vw-lte-980 .portal-app {
  height: auto !important;
  min-height: var(--lpms-visual-viewport-height, 100dvh) !important;
  overflow: auto !important;
  grid-template-columns: 1fr !important;
}

html.lpms-touch-viewport.lpms-vw-lte-980 .portal-sidebar,
html.lpms-touch-viewport.lpms-vw-lte-980 .portal-main-panel {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

html.lpms-touch-viewport.lpms-vw-lte-980 .sidebar-spacer {
  display: none !important;
}

html.lpms-touch-viewport.lpms-vw-lte-980 .portal-main-panel {
  display: flex;
}

html.lpms-touch-viewport.lpms-vw-lte-980 .portal-filterbar,
html.lpms-touch-viewport.lpms-vw-lte-980 .portal-kpi-grid,
html.lpms-touch-viewport.lpms-vw-lte-980 .media-grid {
  grid-template-columns: 1fr;
}

/* Medien-Unterseiten erhalten ebenfalls die reale sichtbare Breite. Ihre
   vorhandenen R005.0.19-Resize-/Fit-Handler werden vom JS erneut angestossen. */
html.lpms-touch-viewport .viewer-shell {
  box-sizing: border-box;
}

@supports (height: 100dvh) {
  html.lpms-touch-viewport .portal-app,
  html.lpms-touch-viewport .viewer-shell {
    --lpms-current-viewport-height: var(--lpms-visual-viewport-height, 100dvh);
  }
}