/* Pleppo Layout Engine + Editor — POS-native, kein freies Verschieben */

.pe-layout-root,
[data-pe-view] {
  --pe-layout-cols: 12;
}

.pe-layout-item {
  min-width: 0;
}

.pe-layout-applied .pe-layout-item[data-pe-hidden="1"] {
  display: none !important;
}

/*
 * POS-Surfaces behalten ihr natives Flex/Grid (kein 12er-Grid darüber),
 * sonst entstehen Abstände, Zentrierung und Scrollbars.
 */
.pe-app.pe-kasse.pe-layout-applied .pe-pos-body.pe-layout-surface,
.pe-app.pe-verkauf.pe-layout-applied .pe-verkauf-layout.pe-layout-surface,
.pe-app.pe-bestellung.pe-layout-applied .pe-bestellung-layout.pe-layout-surface,
.pe-app.pe-station.pe-layout-applied .pe-pos-body.pe-layout-surface {
  /* native Regeln aus pleppo-taler.css */
}

/* Nur Nicht-POS: optionales 12-Spalten-Grid */
.pe-layout-applied .pe-layout-surface:not(.pe-pos-body):not(.pe-verkauf-layout):not(.pe-bestellung-layout):not(.pe-organizer-admin):not(.pe-portal):not(.pe-balance-kiosk-stage) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .55rem;
  align-content: start;
  width: 100%;
}

/* Verwaltung/Portal: kein 12er-Grid — Tabs müssen normal bleiben */
.pe-organizer-admin.pe-layout-applied,
.pe-portal.pe-layout-applied {
  display: block;
}
.pe-organizer-admin .pe-layout-item,
.pe-portal .pe-layout-item {
  width: 100%;
  max-width: none;
  transform: none !important;
  grid-column: auto !important;
}
/* Tab-Panels: Wrapper nur zeigen, wenn der Tab aktiv ist (kein display:contents —
   sonst können position:fixed-Kinder inaktiver Tabs die ganze Seite überdecken). */
.pe-organizer-admin .pe-layout-item[data-pe-module^="panel_"] {
  display: none !important;
}
.pe-organizer-admin .pe-layout-item[data-pe-module^="panel_"]:has(.pe-tab-panel.active),
.pe-organizer-admin .pe-layout-item[data-pe-module^="panel_"].pe-tab-panel.active {
  display: block !important;
}

/* Display modes */
html[data-pe-display-mode="hc-light"],
[data-pe-display-mode="hc-light"] {
  --pe-bg: #ffffff;
  --pe-surface: #ffffff;
  --pe-surface-2: #ffffff;
  --pe-surface-soft: #f5f5f5;
  --pe-text: #000000;
  --pe-muted: #1a1a1a;
  --pe-line: #000000;
  --pe-border: #000000;
  --pe-border-strong: #000000;
  --pe-primary: #000000;
  --pe-on-primary: #ffffff;
  --pe-accent: #000000;
  --pe-accent-ink: #000000;
  --pe-accent-light: #333333;
  --pe-danger: #000000;
  --pe-brand-red: #000000;
  --pe-error-text: #000000;
  --pe-error-bg: #ffffff;
  --pe-error-border: #000000;
  --pe-success-text: #000000;
  --pe-shadow: none;
  --pe-shadow-pos: none;
  color: #000;
  background: #fff;
}
html[data-pe-display-mode="hc-light"] .pe-btn-primary {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}
html[data-pe-display-mode="hc-light"] .pe-card,
html[data-pe-display-mode="hc-light"] .pe-box {
  border: 2px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  box-shadow: none !important;
}

html[data-pe-display-mode="hc-dark"],
[data-pe-display-mode="hc-dark"] {
  --pe-bg: #000000;
  --pe-surface: #0a0a0a;
  --pe-surface-2: #000000;
  --pe-surface-soft: #111111;
  --pe-text: #ffffff;
  --pe-muted: #f0f0f0;
  --pe-line: #ffffff;
  --pe-border: #ffffff;
  --pe-border-strong: #ffffff;
  --pe-primary: #ffffff;
  --pe-on-primary: #000000;
  --pe-accent: #ffff00;
  --pe-accent-ink: #ffff00;
  --pe-accent-light: #ffff66;
  --pe-danger: #ff6666;
  --pe-brand-red: #ff6666;
  --pe-error-text: #ff6666;
  --pe-error-bg: #1a0000;
  --pe-error-border: #ff6666;
  --pe-success-text: #66ff66;
  --pe-shadow: none;
  --pe-shadow-pos: none;
  color: #fff;
  background: #000;
}
html[data-pe-display-mode="hc-dark"] .pe-btn-primary {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
html[data-pe-display-mode="hc-dark"] .pe-card,
html[data-pe-display-mode="hc-dark"] .pe-box {
  border: 2px solid #fff !important;
  background: #000 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Editor: oben bündig, Theme/Admin weg */
body.pe-layout-edit-mode {
  --pe-layout-edit-bar-h: 48px;
  margin: 0 !important;
  padding: 0 !important;
}
body.pe-layout-edit-mode #wpadminbar {
  display: none !important;
}
html.pe-layout-edit-html,
html.pe-layout-edit-html body {
  height: 100% !important;
  overflow: hidden !important;
}
body.pe-layout-edit-mode .site-header,
body.pe-layout-edit-mode header.site-header,
body.pe-layout-edit-mode .wp-block-template-part[data-area="header"],
body.pe-layout-edit-mode .wp-site-blocks > header,
body.pe-layout-edit-mode #masthead,
body.pe-layout-edit-mode .entry-header,
body.pe-layout-edit-mode .page-header {
  display: none !important;
}

.pe-layout-edit-bar {
  position: sticky;
  top: 0;
  z-index: 100050;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  padding: .35rem .55rem;
  background: #1c1d23;
  color: #f4f1ea;
  border-bottom: 2px solid #d4af37;
  font-size: .85rem;
}
.pe-layout-edit-bar select,
.pe-layout-edit-bar button { font: inherit; }
.pe-layout-edit-bar .pe-btn {
  min-height: 32px;
  padding: .2rem .5rem;
}
.pe-layout-edit-hint {
  opacity: .7;
  font-size: .75rem;
}

body.pe-layout-edit-mode .pe-app.pe-kasse,
body.pe-layout-edit-mode .pe-app.pe-verkauf,
body.pe-layout-edit-mode .pe-app.pe-bestellung,
body.pe-layout-edit-mode .pe-app.pe-station {
  height: calc(100dvh - var(--pe-layout-edit-bar-h)) !important;
  max-height: calc(100dvh - var(--pe-layout-edit-bar-h)) !important;
  margin: 0 !important;
  padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom, 0px)) !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  overflow: hidden !important;
}

body.pe-layout-edit-mode .pe-app > .pe-layout-item[data-pe-module="header"] {
  flex: 0 0 auto !important;
  margin: 0 0 .3rem !important;
  width: 100% !important;
  max-width: none !important;
  transform: none !important;
}
body.pe-layout-edit-mode .pe-app > .pe-layout-item[data-pe-module="header"][data-pe-hidden="1"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.pe-layout-edit-mode .pe-layout-item {
  outline: 1px dashed rgba(212, 175, 55, .45);
  outline-offset: 1px;
  position: relative;
}
.pe-layout-edit-mode .pe-layout-item[data-pe-required="1"]::after {
  content: "Pflicht";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #d4af37;
  background: rgba(0,0,0,.55);
  padding: .1rem .3rem;
  border-radius: 4px;
  pointer-events: none;
  z-index: 4;
}
.pe-layout-item-toolbar {
  position: absolute;
  top: 2px;
  left: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  z-index: 6;
}
.pe-layout-item-toolbar button {
  font-size: .65rem;
  padding: .1rem .28rem;
  border: 0;
  border-radius: 4px;
  background: rgba(28,29,35,.85);
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
}

body.pe-layout-edit-mode .pe-app.pe-kasse .pe-kasse-workspace {
  min-height: 0;
  overflow: auto;
}
body.pe-layout-edit-mode .pe-app.pe-kasse .pe-kasse-actions {
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
}
.pe-layout-studio-controls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  align-items: end;
}
.pe-layout-studio-controls label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-weight: 600;
  font-size: .85rem;
}
.pe-layout-studio-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.pe-layout-studio-modules li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding: .55rem .7rem;
  background: var(--pe-surface, #fff);
  border: 1px solid var(--pe-line, #d0d9e4);
  border-radius: 8px;
  cursor: grab;
}
.pe-layout-studio-modules li.pe-layout-dragging { opacity: .5; }
.pe-layout-studio-modules .pe-layout-mod-label {
  flex: 1;
  min-width: 120px;
  font-weight: 700;
}
.pe-layout-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pe-layout-studio-status {
  margin: .5rem 0 0;
  font-size: .9rem;
  color: var(--pe-muted, #666);
}