/*
 * Modern Runtime Overrides
 * Step 2.3.312 - Kiosk Landscape Menu Fit Stable
 *
 * Nur externe CSS-Korrekturen.
 * Keine Änderung an Livewerten, Menü-JavaScript, Alarmen, Builder oder Datenbank.
 *
 * Ziel:
 * - Anlagenfenster aus 2.3.308 beibehalten.
 * - Lange Anlagennamen wie "Betriebsstundenzähler" sauber anzeigen.
 * - Kiosk-Hauptmenü im Querformat nicht mehr so eng machen, damit Start/Anlagen/Alarme/Neu/Vollbild nicht zerhackt werden.
 */

/* Anlagen-Overlay: Kacheln sollen den verfügbaren Platz nutzen und lange Namen nicht abschneiden. */
#modern-runtime-app #rtKioskPagePanel .rt-kiosk-pages,
#modern-runtime-app .rt-kiosk-page-panel .rt-kiosk-pages {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  align-items: stretch !important;
}

#modern-runtime-app #rtKioskPagePanel [data-kiosk-page],
#modern-runtime-app #rtKioskPagePanel .rt-kiosk-page-link,
#modern-runtime-app .rt-kiosk-page-panel [data-kiosk-page],
#modern-runtime-app .rt-kiosk-page-panel .rt-kiosk-page-link {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  min-height: 50px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  line-height: 1.12 !important;
}

#modern-runtime-app #rtKioskPagePanel [data-kiosk-page] *,
#modern-runtime-app #rtKioskPagePanel .rt-kiosk-page-link *,
#modern-runtime-app .rt-kiosk-page-panel [data-kiosk-page] *,
#modern-runtime-app .rt-kiosk-page-panel .rt-kiosk-page-link * {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  hyphens: auto !important;
  line-height: 1.12 !important;
}

/* Direkttext im Link ebenfalls umbrechen lassen. */
#modern-runtime-app #rtKioskPagePanel a,
#modern-runtime-app .rt-kiosk-page-panel a {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Smartphone hochkant: besser eine Spalte als abgeschnittene Kacheln. */
@media (pointer: coarse) and (orientation: portrait), (max-width: 700px) {
  #modern-runtime-app #rtKioskPagePanel,
  #modern-runtime-app .rt-kiosk-page-panel {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }

  #modern-runtime-app #rtKioskPagePanel .rt-kiosk-pages,
  #modern-runtime-app .rt-kiosk-page-panel .rt-kiosk-pages {
    grid-template-columns: 1fr !important;
  }

  #modern-runtime-app #rtKioskPagePanel [data-kiosk-page],
  #modern-runtime-app .rt-kiosk-page-panel [data-kiosk-page] {
    min-height: 48px !important;
  }
}

/* Smartphone quer: Anlagenpanel groß, aber scrollbar und mit brauchbaren Kachelbreiten. */
@media (pointer: coarse) and (orientation: landscape), (max-height: 620px) {
  #modern-runtime-app #rtKioskPagePanel,
  #modern-runtime-app .rt-kiosk-page-panel {
    max-height: calc(100vh - 18px) !important;
    overflow: hidden !important;
  }

  #modern-runtime-app #rtKioskPagePanel .rt-kiosk-pages,
  #modern-runtime-app .rt-kiosk-page-panel .rt-kiosk-pages {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Kiosk-Hauptmenü im Querformat: kompakt, aber Buttons breit genug für ganze Wörter. */
@media (pointer: coarse) and (orientation: landscape), (max-height: 620px) {
  #modern-runtime-app.rt-kiosk .rt-kiosk-bar {
    width: min(620px, calc(100vw - 28px)) !important;
    max-width: min(620px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
    gap: 10px !important;
    border-radius: 22px !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-info {
    font-size: 0.9em !important;
    line-height: 1.14 !important;
    min-width: 210px !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(145px, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions a,
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    font-size: 0.9em !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions a span,
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button span {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    line-height: 1.08 !important;
  }
}

/* Sehr flaches Querformat: etwas kleiner, aber weiterhin ohne Wort-Zerhackung. */
@media (pointer: coarse) and (orientation: landscape), (max-height: 460px) {
  #modern-runtime-app.rt-kiosk .rt-kiosk-bar {
    width: min(560px, calc(100vw - 24px)) !important;
    max-width: min(560px, calc(100vw - 24px)) !important;
    padding: 10px !important;
    gap: 7px !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-info {
    font-size: 0.84em !important;
    min-width: 190px !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions {
    grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
    gap: 7px !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions a,
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button {
    min-height: 38px !important;
    padding: 6px 10px !important;
    font-size: 0.84em !important;
  }
}


/* Step 2.3.317 - Kiosk Anlagen Button Size
   Nur optische Korrektur: Der Anlagen-Button bekommt im Kiosk-Menü dieselbe Mindestbreite
   und Höhe wie die anderen Primärbuttons, ohne das Pan/Zoom-/Orientierungsverhalten anzufassen.
*/
@media (pointer: coarse) {
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button[data-kiosk-action="pages"],
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions .rt-kiosk-btn-pages,
  #modern-runtime-app.rt-kiosk button[data-kiosk-action="pages"] {
    min-width: clamp(104px, 22vw, 148px) !important;
    min-height: 58px !important;
    height: auto !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
}

/* Im Smartphone-Hochformat nur den Anlagen-Button angleichen, nicht die komplette Button-Leiste umbauen. */
@media (pointer: coarse) and (orientation: portrait) {
  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button[data-kiosk-action="pages"],
  #modern-runtime-app.rt-kiosk button[data-kiosk-action="pages"] {
    flex: 0 0 clamp(104px, 22vw, 148px) !important;
    width: clamp(104px, 22vw, 148px) !important;
    max-width: clamp(104px, 22vw, 148px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    white-space: nowrap !important;
  }

  #modern-runtime-app.rt-kiosk .rt-kiosk-actions button[data-kiosk-action="pages"] span,
  #modern-runtime-app.rt-kiosk button[data-kiosk-action="pages"] span {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}