/* ------------------------------------------------------------------ *
 * Anpassungen für den Betrieb als WordPress-Plugin.
 *
 * app.css ist vollständig auf `.app` eingegrenzt und fasst nichts ausserhalb
 * an; hier stehen nur die Masse, die sich zwischen eigenständiger Seite und
 * Einbettung unterscheiden.
 * ------------------------------------------------------------------ */

/* --- Im Theme (Shortcode) ------------------------------------------ */
.app.wpl-embed {
  --shell-min-height: 80vh;
  --sidebar-height: 80vh;
  --sticky-top: 0px;
  --overlay-z: 9000;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Eingebettet darf die Grundfläche nicht über das ganze Fenster laufen –
   sie bleibt innerhalb des Planers. Nur auf der eigenen Vollbild-Seite
   (.wpl-page) ist der Planer das ganze Fenster und darf fixiert bleiben. */
.app.wpl-embed::before,
.app.wpl-admin::before {
  position: absolute;
}

/* Der Planer ist eine ganze Anwendung und wirkt in der Textspalte eines Themes
   zu eng. «wide» bricht darum aus der Spalte aus, «full» geht über die volle
   Breite, «content» bleibt in der Spalte. Der Abstand von 24px verhindert,
   dass die Scrollleiste einen waagrechten Überlauf erzeugt. */
.app.wpl-embed--wide {
  width: auto;
  max-width: none;
  margin-left: calc(50% - min(50vw - 24px, 720px));
  margin-right: calc(50% - min(50vw - 24px, 720px));
}

.app.wpl-embed--full {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw + 8px);
  margin-right: calc(50% - 50vw + 8px);
}

.app.wpl-embed--content {
  width: auto;
}

/* Die Adminleiste im Frontend verschiebt sticky positionierte Elemente. */
.admin-bar .app.wpl-embed {
  --sticky-top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .app.wpl-embed {
    --sticky-top: 46px;
  }
}

/* --- Eigene Seite mit Vollbild-Vorlage ------------------------------ */
body.wpl-fullscreen {
  margin: 0;
  background: var(--bg);
}

.app.wpl-page {
  --shell-min-height: 100dvh;
  --sidebar-height: 100dvh;
  --sticky-top: 0px;
  --overlay-z: 9000;
}

.admin-bar .app.wpl-page {
  --shell-min-height: calc(100dvh - 32px);
  --sidebar-height: calc(100dvh - 32px);
  --sticky-top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .app.wpl-page {
    --shell-min-height: calc(100dvh - 46px);
    --sidebar-height: calc(100dvh - 46px);
    --sticky-top: 46px;
  }
}

/* --- Im Adminbereich ------------------------------------------------ */
.wpl-admin-wrap {
  margin: 0 0 0 -20px;
  padding: 0;
}

.app.wpl-admin {
  --shell-min-height: calc(100vh - 32px);
  --sidebar-height: calc(100vh - 32px);
  --sticky-top: 32px;
  --overlay-z: 100100;
  min-height: calc(100vh - 32px);
}

@media (max-width: 782px) {
  .app.wpl-admin {
    --shell-min-height: calc(100vh - 46px);
    --sidebar-height: calc(100vh - 46px);
    --sticky-top: 46px;
  }
}

/* WordPress setzt eigene Formularstile – innerhalb der App gelten unsere. */
.app input[type="text"],
.app input[type="email"],
.app input[type="url"],
.app input[type="password"],
.app input[type="number"],
.app input[type="search"],
.app input[type="date"],
.app input[type="time"],
.app select,
.app textarea {
  box-shadow: none;
  min-height: 0;
  margin: 0;
  max-width: none;
}

.app input[type="checkbox"] {
  margin: 0;
  border-radius: 3px;
}

.app input[type="checkbox"]::before {
  content: none;
}

.app button {
  text-transform: none;
  letter-spacing: normal;
}

.app a:focus,
.app button:focus,
.app input:focus,
.app select:focus,
.app textarea:focus {
  box-shadow: none;
}

/* Das Theme soll die Typografie innerhalb der App nicht überschreiben. */
.app h1,
.app h2,
.app h3 {
  padding: 0;
  border: 0;
  text-transform: none;
}

.app ul,
.app ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app table {
  margin: 0;
  border: 0;
}