:host {
  display: block;
  position: relative;
  --sidebar-width: 300px;
  --sidebar-background: #fff;
  --sidebar-color: #333;
  --resizer-background: #f1f1f1;
  --resizer-hover-background: #e0e0e0;
  --close-button-color: #888;
  --close-button-hover-background: #f0f0f0;
}

.sidebar-container {
  display: flex;
  height: 100%;
  width: var(--sidebar-width);
  position: fixed;
  top: 0;
  right: 0;
  background-color: var(--sidebar-background);
  color: var(--sidebar-color);
  border-radius: var(--xx-sm, 4px);
  transition: transform 0.3s ease-in-out, width 0s, height 0s, top 0s, left 0s;
  z-index: 1000;
  flex-direction: column;
  border-radius: var(--xx-sm, 4px);
  border-radius: var(--xx-sm, 4px);
  background: var(--BW-White, #fff);
  box-shadow: 0px 1px 40px 0px rgba(15, 15, 16, 0.25);
}

.sidebar-container.closed {
  transform: translateX(100%);
}

.sidebar-container.firstRender {
  transition: all 0s;
}

.sidebar-container.kiosk {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.sidebar-container .resizer {
  width: 32px;
  height: 100%;
  cursor: ew-resize;
  background-color: var(--resizer-background);
  position: absolute;
  left: 0;
  top: 0;
  user-select: none;
}

.sidebar-container .resizer:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--rd-input-focused);
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  position: absolute;

  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-image: url("/src/img/2024/svg/icons/rd-sidebar-drag-icon.svg");
  -webkit-mask-image: url("/src/img/2024/svg/icons/rd-sidebar-drag-icon.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.sidebar-container .resizer:hover {
  background-color: var(--resizer-hover-background);
}

/*
 * NOTE: Do not add `will-change` (or transform/filter/perspective/contain) to
 * `.sidebar-container`. In Safari/WebKit, `will-change` of any value makes this
 * element a containing block for `position: fixed` descendants, which traps the
 * inline TinyMCE editor dialogs (e.g. "Link einfügen/bearbeiten") inside the
 * sidebar and clips them via `.content-area { overflow: auto }`. Chrome ignores
 * `will-change: width` for fixed positioning, so the bug was Mac-only.
 */

.sidebar-container .content-area {
  flex-grow: 1;
  overflow: auto;
  padding: 32px;
  display: flex;
  padding-left: 64px;
  flex-direction: column;
  text-align: left;
  padding-top: calc(env(safe-area-inset-top) + 32px);
}

.sidebar-container .pc-ds-actionBtn {
  border: none;
  background-color: transparent;
  color: var(--rd-secondary-active);
  font-size: var(--rd-fontsize-4);
  display: flex;
  align-items: center;
  /* gap: var(--rd-spacing-x-sm); */
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pc-ds-actionBtn.iconBtn:before {
  content: "";
  display: inline-block;
  background-color: var(--rd-secondary-active);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.sidebar-container .action-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 0.5rem 1rem; */
  /* border-bottom: 1px solid #e0e0e0; */
  flex-shrink: 0;
  margin-bottom: var(--rd-spacing-md);
}

.sidebar-container .header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--rd-spacing-sm);
}

.sidebar-container .action-button {
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--close-button-color, #555);
  width: 32px;
  height: 32px;
  -webkit-appearance: none;
  appearance: none;
}

.enable-fullscreen,
.disable-fullscreen {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--rd-primary-active);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  cursor: pointer;
  border: none;
}

.enable-fullscreen {
  mask-image: url("/src/img/2024/svg/icons/rd-enable-fullscreen.svg");
  -webkit-mask-image: url("/src/img/2024/svg/icons/rd-enable-fullscreen.svg");
}

.disable-fullscreen {
  mask-image: url("/src/img/2024/svg/icons/rd-disable-fullscreen.svg");
  -webkit-mask-image: url("/src/img/2024/svg/icons/rd-disable-fullscreen.svg");
}

.sidebar-container .content-area>.close-button {
  width: 56px;
  height: 56px;
  padding: 10px;
  border-radius: 999px;
  border: 8px solid var(--BW-White, #fff);
  background: var(--Base-Colors-fg-bg, #f2f6fa);

  /* Shadow - xxl */
  box-shadow: 0px 32px 32px -12px rgba(16, 24, 40, 0.04),
    0px 32px 80px -12px rgba(16, 24, 40, 0.08);
  position: absolute;
  left: -28px;
  top: 24px;
  cursor: pointer;
}

/* Hide close button when sidebar is closed or in fullscreen */
.sidebar-container.closed .content-area>.close-button,
.sidebar-container.kiosk .content-area>.close-button {
  display: none;
}

.sidebar-container .content-area>.close-button:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  background-color: var(--rd-primary-active);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
  -webkit-mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.sidebar-container .action-button .text {
  display: none;
}

.sidebar-container .action-button:hover .text {
  display: inline;
  margin-left: 0.5rem;
}

.sidebar-container .close-button {
  font-size: 1.5rem;
  line-height: 1;
}

.sidebar-container .action-header .close-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--rd-primary-active);
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
  -webkit-mask-image: url("/src/img/2023/svg/icons/rd-icon-close.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  cursor: pointer;
}

.sidebar-header {
  position: relative;
  margin: -32px -32px 32px -62px;
  padding: 32px 40px;
  color: var(--rd-card-fg);
}

.kiosk .sidebar-header {
  margin-left: -64px;
}

.resizer+.content-area .sidebar-header {
  margin-left: -32px;
}

.rd-info-msg {
  text-align: center;
  border: 1px dotted #d66181;
  margin-top: 20px;
  padding: var(--rd-spacing-lg);
  border-radius: var(--rd-borderradius-border-md);
}

.avatar_mainframe {
  width: 96px;
  height: 96px;
}

.avatar_mainframe .myFoto {
  width: 100% !important;
  height: 100% !important;
}

.header-titel-flex {
  display: flex;
  gap: var(--rd-spacing-lg);
}

.content-area h2,
.content-area h3 {
  margin: 0;
  padding: 0;
  color: #fff;
}

.header-conent h2 {
  color: var(--BW-White, #fff);
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 132%;
  /* 29.04px */
  letter-spacing: 0.22px;
}

.header-conent .overtitel {
  color: var(--rd-card-fg);

  /* Headline/H5/H5 Regular */
  /* font-family: "Open Sans"; */
  font-size: var(--rd-fontsize-4);
  font-style: normal;
  font-weight: var(--rd-fontweights-open-sans-0);
  line-height: var(--rd-lineheights-0);
  /* 23.8px */
}

.header-conent h3 {
  color: var(--BW-White, #fff);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 170%;
  /* 23.8px */
}

.header-conent p {
  color: var(--BW-White, #fff);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  line-height: 132%;
  /* 14.52px */
  letter-spacing: 0.11px;
  margin: 0;
}

.header-conent .rd-status-badge {
  margin-top: var(--rd-spacing-md);
}

.header-actions-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.header-fullscreen-btn:hover {
  opacity: 1;
}

.header-fullscreen-icon::before {
  margin-right: 0;
}

.kebab-wrap {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
}

.kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  /* border-radius:10px; */
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  /* backdrop-filter: blur(6px); */
  cursor: pointer;
  border: none;
  color: var(--rd-card-fg);
}

.kebab-btn:focus {
  outline: 2px solid #7aa7ff;
  outline-offset: 2px;
}

.menu {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 180px;
  margin: 6px 0 0;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-left: 0 !important;
  gap: var(--rd-spacing-x-sm);
}

.menu-item {
  width: 100%;
  gap: 10px;
  color: var(--rd-font-dark);
  font-size: var(--rd-fontsize-3);
  letter-spacing: 0;
  line-height: 132%;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  border-radius: var(--rd-spacing-xx-sm);
  text-align: left;
  border: none;
  width: 100%;
  background-color: transparent;
  font-weight: var(--rd-fontweights-open-sans-1);
  display: grid;
  grid-template-areas: "ICON LABEL";
  grid-template-columns: 22px auto;
  gap: 12px;
  align-items: center;
  padding-right: var(--rd-spacing-xxx-big) !important;
}

.menu-item.disabled {
  pointer-events: none;
  color: var(--rd-input-default);
}

.menu-item.disabled:before {
  background-color: var(--rd-input-default);
}

.menu-item:hover {
  color: var(--rd-primary-hover);
}

.menu-item.rd-icon-import::before,
.menu-item.rd-icon-import::after {
  width: 20px;
  height: 20px;
}

.mi-icon:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--rd-font-dark);
  vertical-align: middle;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: 50%;
  -webkit-mask-position: 50%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  margin-right: 0;
}

.menu-item.mi-icon:hover:before {
  background-color: var(--rd-primary-hover);
}

pc-dynamic-sidebar #confirm_form {
  width: 100%;
  position: absolute;
}

pc-dynamic-sidebar #confirm_form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rd-segmented-control-label {
  color: var(--BW-Black, #0D1130);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 132%;
  /* 18.48px */
}

.menu-separator hr {
  margin: var(--rd-spacing-x-sm) 0;
  height: 1px;
  border: 0;
  background-color: var(--rd-input-default);
}

/* ================================================================
   Generic Theme Classes for Sidebars
   ================================================================ */

/* Light theme */
.sidebar-container.rd-theme-light .content-area {
  background-color: #ffffff;
  color: #333333;
}

/* Dark theme */
.sidebar-container[dark-mode] .content-area {
  background-color: #252526;
  color: #e0e0e0;
}

.sidebar-container[dark-mode] .resizer {
  background-color: #1a1a1a;
}

.sidebar-container[dark-mode] .resizer:hover {
  background-color: #333333;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Chromeless Mode - Full-bleed content without header/padding
   Used by pc-botui and other self-contained components
   ═══════════════════════════════════════════════════════════════════════════ */

.sidebar-container .content-area.chromeless {
  padding: 0;
  padding-left: 32px;
  overflow: hidden;
}

/* Remove left padding in kiosk mode (no resizer shown) */
.sidebar-container.kiosk .content-area.chromeless {
  padding-left: 0;
}

/* Close button in chromeless mode - positioned top-left */
.sidebar-container .content-area.chromeless>.chromeless-close {
  position: absolute;
  top: 12px;
  left: 4px;
  /* Override the -28px from normal close button */
  z-index: 100;
  /* Reset styles from normal close button */
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Hide chromeless close button when sidebar is closed or in fullscreen */
.sidebar-container.closed .content-area.chromeless>.chromeless-close,
.sidebar-container.kiosk .content-area.chromeless>.chromeless-close {
  display: none;
}

/* Ensure slotted content fills the space */
pc-dynamic-sidebar[chromeless] .content-area.chromeless {
  display: flex;
  flex-direction: column;
}

pc-dynamic-sidebar[chromeless] .content-area.chromeless>*:not(.chromeless-close) {
  flex: 1;
  min-height: 0;
}

/* ===== Bottom Drawer Mode ===== */

.sidebar-container.sidebar-bottom {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 85vh;
  height: auto;
  border-radius: 16px 16px 0 0;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0px -4px 40px 0px rgba(15, 15, 16, 0.2);
}

.sidebar-container.sidebar-bottom.closed {
  transform: translateY(100%);
}

.sidebar-container.sidebar-bottom.firstRender {
  transition: all 0s;
}

.sidebar-container.sidebar-bottom .content-area {
  max-height: calc(85vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--rd-spacing-x-big) var(--rd-spacing-x-big);
}

.sidebar-container.sidebar-bottom .resizer {
  display: none;
}

/* Bottom drawer drag handle */
.bottom-drawer-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
  cursor: grab;
  flex-shrink: 0;
  position: relative;
  touch-action: none;
}

.bottom-drawer-handle-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--rd-gray-300, #d1d5db);
}

/* Bottom drawer header row: label left, close button right */
.bottom-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--rd-spacing-x-big);
  min-height: 32px;
  flex-shrink: 0;
}

.bottom-drawer-label {
  flex: 1;
  min-width: 0;
}

.bottom-drawer-close {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
}

/* Hide action header in bottom drawer — handle + close button replaces it */
.sidebar-container.sidebar-bottom .close-button,
.sidebar-container.sidebar-bottom .action-header {
  display: none;
}

/* Bottom drawer backdrop overlay */
.bottom-drawer-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}

/* Buttons in DynamicSidebar: capped width & centered */
pc-dynamic-sidebar .rd-primary-btn.full-size,
pc-dynamic-sidebar .rd-secondary-btn.full-size,
pc-dynamic-sidebar .rd-primary-btn-outline.full-size,
pc-dynamic-sidebar .rd-secondary-btn-outline.full-size {
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}
/* Minimal Queries filter drawer: reduce the large default content-area padding */
.sidebar-container.rd-qmin-sidebar .content-area {
	padding: 12px 14px;
	padding-top: calc(env(safe-area-inset-top) + 12px);
}