/* Gemeinsame PraxisPit-App-Leiste fuer Portal- und Standalone-Werkzeuge. */
:root {
  --pp-toolbar-height: 64px;
  --pp-toolbar-mobile-height: 56px;
  --pp-toolbar-gap: 18px;
  --pp-toolbar-mobile-gap: 12px;
  --pp-toolbar-text: var(--brand, #ef735f);
  --pp-toolbar-line: #e2e7ea;
  --pp-toolbar-soft: #fff0ed;
  --pp-toolbar-button: #fff9f7;
}

body.preview-mobile,
body.app-preview-mobile {
  --pp-toolbar-current-height: var(--pp-toolbar-mobile-height);
  --pp-toolbar-current-gap: var(--pp-toolbar-mobile-gap);
  --pp-toolbar-display: grid;
  --pp-toolbar-place-items: center;
  --pp-toolbar-padding: 8px;
  --pp-toolbar-main-position: static;
  --pp-toolbar-main-top: auto;
  --pp-toolbar-main-left: auto;
  --pp-toolbar-main-columns: repeat(3, minmax(0, 1fr));
  --pp-toolbar-main-width: min(100%, 430px);
  --pp-toolbar-main-max-width: 430px;
  --pp-toolbar-main-transform: none;
  --pp-toolbar-button-height: 38px;
  --pp-toolbar-button-radius: 14px;
  --pp-toolbar-button-padding: 0 8px;
  --pp-toolbar-button-font-size: 12px;
  --pp-toolbar-preview-display: none;
}

.app-simple-toolbar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  display: var(--pp-toolbar-display, block) !important;
  place-items: var(--pp-toolbar-place-items, normal) !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--pp-toolbar-current-height, var(--pp-toolbar-height)) !important;
  height: var(--pp-toolbar-current-height, var(--pp-toolbar-height)) !important;
  margin: 0 !important;
  padding: var(--pp-toolbar-padding, 0 16px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--pp-toolbar-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 250, 248, 0.94)) !important;
  box-shadow: 0 8px 24px rgba(28, 31, 34, 0.07) !important;
  backdrop-filter: blur(14px) !important;
  box-sizing: border-box !important;
}

.app-toolbar-main {
  position: var(--pp-toolbar-main-position, absolute) !important;
  top: var(--pp-toolbar-main-top, 50%) !important;
  left: var(--pp-toolbar-main-left, 50%) !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: var(--pp-toolbar-main-columns, repeat(3, 104px)) !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: stretch !important;
  gap: 8px !important;
  width: var(--pp-toolbar-main-width, auto) !important;
  max-width: var(--pp-toolbar-main-max-width, none) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: var(--pp-toolbar-main-transform, translate(-50%, -50%)) !important;
  box-sizing: border-box !important;
}

.app-toolbar-logout {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-back-link,
.app-logout-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--pp-toolbar-button-height, 40px) !important;
  height: var(--pp-toolbar-button-height, 40px) !important;
  margin: 0 !important;
  padding: var(--pp-toolbar-button-padding, 0 14px) !important;
  border: 1px solid rgba(239, 115, 95, 0.38) !important;
  border-radius: var(--pp-toolbar-button-radius, 16px) !important;
  background: linear-gradient(180deg, #ffffff, var(--pp-toolbar-button)) !important;
  color: var(--pp-toolbar-text) !important;
  box-shadow: 0 8px 18px rgba(28, 31, 34, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: var(--pp-toolbar-button-font-size, 13px) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  appearance: none !important;
}

.app-back-link:hover,
.app-logout-link:hover {
  border-color: rgba(239, 115, 95, 0.68) !important;
  background: var(--pp-toolbar-soft) !important;
  color: var(--pp-toolbar-text) !important;
  transform: translateY(-1px) !important;
}

.app-simple-toolbar .app-preview-toggle,
.app-simple-toolbar .device-preview-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 16px !important;
  z-index: 2 !important;
  display: var(--pp-toolbar-preview-display, inline-flex) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 4px 5px !important;
  border: 1px solid rgba(215, 222, 226, 0.95) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
}

.app-simple-toolbar .device-preview-toggle span {
  color: var(--pp-toolbar-text) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.app-simple-toolbar .device-preview-toggle button {
  min-width: 0 !important;
  min-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--pp-toolbar-text) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.app-simple-toolbar .device-preview-toggle button.active {
  background: var(--pp-toolbar-soft) !important;
  color: var(--pp-toolbar-text) !important;
}

.portal-body.tool-page-body .portal-main,
.app-simple-toolbar + main,
.app-simple-toolbar + .shell,
.app-simple-toolbar + .workload-app,
.app-simple-toolbar + .portal-main {
  margin-top: calc(var(--pp-toolbar-current-height, var(--pp-toolbar-height)) + var(--pp-toolbar-current-gap, var(--pp-toolbar-gap))) !important;
  padding-top: 0 !important;
}



.app-simple-toolbar + .workload-app .content {
  padding-top: 0 !important;
}

@media (max-width: 980px) and (min-width: 761px) {
  .app-toolbar-main {
    --pp-toolbar-main-columns: repeat(3, 96px);
  }

  .app-simple-toolbar .device-preview-toggle {
    right: 10px !important;
  }

  .app-simple-toolbar .device-preview-toggle span {
    display: none !important;
  }
}

@media (max-width: 760px) {
  body {
    --pp-toolbar-current-height: var(--pp-toolbar-mobile-height);
    --pp-toolbar-current-gap: var(--pp-toolbar-mobile-gap);
    --pp-toolbar-display: grid;
    --pp-toolbar-place-items: center;
    --pp-toolbar-padding: 8px;
    --pp-toolbar-main-position: static;
    --pp-toolbar-main-top: auto;
    --pp-toolbar-main-left: auto;
    --pp-toolbar-main-columns: repeat(3, minmax(0, 1fr));
    --pp-toolbar-main-width: min(100%, 430px);
    --pp-toolbar-main-max-width: 430px;
    --pp-toolbar-main-transform: none;
    --pp-toolbar-button-height: 38px;
    --pp-toolbar-button-radius: 14px;
    --pp-toolbar-button-padding: 0 8px;
    --pp-toolbar-button-font-size: 12px;
    --pp-toolbar-preview-display: none;
  }
}