/* ============================================================================
   KOS KLIMA® Intranet – Bearbeitungsmodus
   ----------------------------------------------------------------------------
   Gestaltung der Oberfläche aus app/editmode.js: Statusleiste, Seitenpanel,
   Blockauswahl mit Werkzeugleiste und Breitengriff.

   Eigene Datei, weil dieser Teil nur für Bearbeitende gilt und ein Vielfaches
   an Regeln hat wie die Ansicht. Wer am Erscheinungsbild des Portals arbeitet,
   muss hier nicht hineinsehen – und umgekehrt.
   ========================================================================== */

/* ========================================================================== */
/* 1. STATUSLEISTE                                                            */
/* ========================================================================== */
/* Sie sitzt unter der Kopfzeile und bleibt beim Scrollen stehen. Der frühere
   Fließtext ist weg; stattdessen tragen Modus, Speicherzustand und Knöpfe
   eine Zeile. */

/* Die alte Leiste war ein violetter Verlauf mit weißer Schrift, mit einer
   orangefarbenen Variante für Entwürfe (.has-draft) und einer petrolfarbenen
   für die Vorschau (.is-preview). Alle drei müssen hier abgeräumt werden –
   die beiden Varianten tragen zwei Klassen und wären sonst stärker als die
   Grundregel. Ohne das schlüge die Leiste auf jeder Seite mit Entwurf nach
   Orange um. */
/* Sichtbarkeit: NUR im Bearbeitungsmodus.

   Hier stand "display:flex" ohne Bedingung – damit war die Leiste dauerhaft
   eingeblendet und überdeckte den Inhalt, weil .main seinen oberen Abstand
   nur im Bearbeitungsmodus um die Leistenhöhe vergrößert. Betroffen waren
   auch Mitarbeitende ohne Bearbeitungsrechte, die diese Leiste nie zu sehen
   bekommen dürfen.

   Die Gestaltung unten gilt weiterhin unbedingt; nur das Ein- und Ausblenden
   hängt an body.edit-mode – wie in css/legacy.css auch. */
.edit-banner { display: none; }
body.edit-mode .edit-banner,
body.edit-mode .edit-banner.has-draft,
body.edit-mode .edit-banner.is-preview { display: flex; }

.edit-banner,
.edit-banner.has-draft,
.edit-banner.is-preview {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding: 10px var(--space-9);
  background: var(--glass-solid);
  backdrop-filter: var(--blur-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  border-bottom: 1px solid var(--border-card);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
}

/* ------------------------------------------------------- Modus-Umschalter --*/
.edit-banner .em-modes {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--ink-07);
  flex: none;
}
.edit-banner .em-mode {
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-meta);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.edit-banner .em-mode:hover:not(:disabled):not(.is-on) { color: var(--text-heading); }
.edit-banner .em-mode.is-on {
  background: var(--surface-card);
  color: var(--text-heading);
  box-shadow: 0 2px 8px rgba(55, 83, 116, 0.10);
}
/* "Live" ohne veröffentlichten Stand: sichtbar, aber erkennbar nicht wählbar.
   Ausblenden wäre schlechter – dann wirkte die Leiste je nach Seite anders. */
.edit-banner .em-mode:disabled { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------- Speicherzustand --*/
.em-save { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-meta); white-space: nowrap; }
.em-save-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--action-primary); flex: none; }
/* Beim Speichern schlägt der Punkt in den warmen Ton um – eine Bewegung wäre
   bei einem Vorgang von unter einer Sekunde nur Unruhe. */
.em-save.is-busy .em-save-dot { background: var(--beige); }

/* ------------------------------------------------------------- Zustände --*/
.em-tag {
  font: var(--weight-bold) 10px / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.em-tag-draft { background: var(--accent-16); color: var(--action-dark); }
.em-tag-live  { background: var(--ink-07);   color: var(--text-heading); }

.em-note { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-heading); white-space: nowrap; }
.em-note-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex: none; }
.em-note-dot.is-live  { background: var(--blue-dark); }
.em-note-dot.is-draft { background: var(--blue-light); }

.em-others { color: var(--text-meta); }

/* --------------------------------------------------------------- Knöpfe --*/
.em-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.edit-banner .em-btn-quiet {
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--action-dark);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.edit-banner .em-btn-quiet:hover { background: var(--ink-07); }
.edit-banner .em-btn-publish {
  padding: 10px 16px;
  border: 1.5px solid var(--action-primary);
  border-radius: var(--radius-xs);
  background: var(--action-primary);
  color: var(--white);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.edit-banner .em-btn-publish:hover:not(:disabled) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
/* Ohne Entwurf gibt es nichts zu veröffentlichen. Der Knopf bleibt stehen,
   damit die Leiste ihre Gestalt behält, ist aber deutlich stummgeschaltet. */
.edit-banner .em-btn-publish:disabled { opacity: .35; cursor: not-allowed; }

/* ========================================================================== */
/* 2. SEITENPANEL                                                             */
/* ========================================================================== */
/* Liegt wie die Seitenleiste fest am Rand. Es ist nur im Bearbeitungsmodus da;
   body.edit-panel-open schiebt den Inhaltsbereich um seine Breite ein. */

.em-panel {
  position: fixed;
  /* Unter ALLEN Ebenen, die oben fest liegen: Umgebungsbalken, Kopfzeile,
     Modus-Leiste und Werkzeugleiste. Die Werkzeugleiste reicht von der
     Seitenleiste bis zum rechten Rand und deckte sonst die Reiter des Panels
     zu; der Umgebungsbalken fehlte in der Rechnung ganz. */
  top: calc(var(--env-badge-h, 0px) + var(--header-h) + var(--edit-banner-h) + var(--edit-toolbar-h, 0px));
  right: 0;
  bottom: 0;
  width: 312px;
  display: none;
  flex-direction: column;
  background: var(--surface-card);
  border-left: 1px solid var(--border-card);
  z-index: 40;
  overflow: hidden;
}
body.edit-panel-open .em-panel { display: flex; }
body.edit-panel-open .main { margin-right: 312px; }

.em-panel-tabs { display: flex; gap: var(--space-1); padding: var(--space-5) var(--space-6) 0; border-bottom: 1px solid var(--border-card); flex: none; }
.em-tab {
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  cursor: pointer;
  color: var(--text-meta);
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.em-tab.is-on { color: var(--text-heading); border-bottom-color: var(--action-primary); }

.em-panel-body { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-6) var(--space-8); }
.em-panel-hint,
.em-panel-empty { font-size: 12.5px; color: var(--text-meta); margin: 0 0 var(--space-5); }
.em-panel-empty { text-align: center; padding: var(--space-8) var(--space-4); }
.em-panel-tip {
  margin: var(--space-7) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-xs);
  background: var(--bg-sand);
  font-size: 12.5px;
  color: var(--text-body);
}
.em-panel-tip strong { color: var(--text-heading); }

/* ---------------------------------------------------------- Bibliothek --*/
.em-lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.em-lib-item {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 10px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease-overshoot),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.em-lib-item:hover {
  transform: translateY(var(--lift-hover));
  border-color: var(--accent-55);
  box-shadow: 0 10px 24px rgba(55, 83, 116, 0.08);
}
.em-lib-item:active { cursor: grabbing; }
.em-lib-glyph {
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-xs);
  background: var(--accent-12);
  color: var(--action-dark);
  display: grid; place-items: center;
}
.em-lib-glyph svg { width: 15px; height: 15px; }
.em-lib-label { font: var(--weight-medium) 12.5px / 1.2 var(--font-headline); color: var(--text-heading); }

/* -------------------------------------------------------- Einstellungen --*/
.em-set-eyebrow {
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  margin-bottom: var(--space-2);
}
.em-set-type { font: var(--weight-bold) 18px / 1.2 var(--font-headline); color: var(--text-heading); margin-bottom: var(--space-7); }
.em-set-label {
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}
.em-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-3); }
.em-chip {
  padding: 8px 6px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--action-dark);
  cursor: pointer;
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
}
.em-chip:hover { border-color: var(--border-hover); }
.em-chip.is-on { background: var(--action-dark); border-color: var(--action-dark); color: var(--white); }
.em-set-hint { font-size: 12px; color: var(--text-meta); margin: 0 0 var(--space-7); }

/* Die Knöpfe "Nach oben/unten" im Panel sind entfallen – verschoben wird am
   Ziehgriff über dem Block. Ihre Regeln standen hier. */

.em-set-open {
  width: 100%;
  padding: 11px;
  margin-bottom: var(--space-7);
  border: 1.5px solid var(--hairline-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  color: var(--action-dark);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.em-set-open:hover { border-color: var(--border-hover); }

.em-set-foot { display: flex; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-card); }
.em-set-foot button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  cursor: pointer;
  font: var(--weight-bold) var(--text-eyebrow) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}
.em-set-dup { border: 1.5px solid var(--hairline-strong); color: var(--action-dark); }
.em-set-dup:hover { border-color: var(--border-hover); }
.em-set-del { border: 1.5px solid rgba(201, 48, 44, .3); color: var(--danger); }
.em-set-del:hover { background: var(--danger); border-color: var(--danger); color: var(--white); }

/* ========================================================================== */
/* 3. BLOCKAUSWAHL                                                            */
/* ========================================================================== */

/* Im Bearbeitungsmodus bekommt jeder Block eine zurückhaltende Kontur, damit
   erkennbar ist, WO die Blöcke enden – ohne Auswahl war das vorher Raten. */
body.edit-mode #blocks-host .block {
  position: relative;
  border-radius: var(--radius-md);
  outline: 1px dashed var(--ink-15);
  outline-offset: 6px;
  transition: outline-color var(--dur-fast) var(--ease-standard);
}
body.edit-mode #blocks-host .block:hover { outline-color: var(--accent-55); }
body.edit-mode #blocks-host .block.is-selected {
  outline: none;
  box-shadow: 0 0 0 2px var(--action-dark);
}

/* ------------------------------------------------------- Werkzeugleiste --*/
.em-blocktools {
  position: absolute;
  top: -38px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-xs);
  background: var(--action-dark);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(55, 83, 116, 0.25);
  z-index: 5;
  animation: emPop .25s var(--ease-overshoot) both;
}
@keyframes emPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.em-bt-grip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-xs); cursor: grab; }
.em-bt-grip:hover { background: rgba(255, 255, 255, .12); }
.em-bt-grip svg { width: 14px; height: 14px; }
.em-bt-type {
  padding: 0 var(--space-3);
  font: var(--weight-bold) var(--text-label) / 1 var(--font-headline);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--text-accent);
  white-space: nowrap;
}
.em-bt-width { padding: 0 var(--space-3); font: var(--weight-medium) var(--text-label) / 1 var(--font-headline); white-space: nowrap; }
.em-bt-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .15); }
.em-blocktools button {
  width: 28px; height: 28px;
  border: none; border-radius: var(--radius-xs);
  background: transparent; color: var(--white);
  cursor: pointer; display: grid; place-items: center;
}
.em-blocktools button svg { width: 14px; height: 14px; }
.em-blocktools button:hover { background: rgba(255, 255, 255, .12); }
.em-blocktools button.em-bt-danger:hover { background: var(--danger); }

/* ------------------------------------------------------- Breite ziehen --*/
.em-resize {
  position: absolute;
  top: 50%; right: -11px;
  transform: translateY(-50%);
  width: 10px; height: 44px;
  border-radius: 5px;
  background: var(--action-dark);
  cursor: ew-resize;
  z-index: 5;
}
.em-resize::after {
  content: "";
  position: absolute; left: 4px; top: 14px;
  width: 2px; height: 16px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .7);
}
.em-resize:hover { background: var(--action-primary); }
/* Während des Ziehens darf nichts markiert werden – sonst nimmt der Browser
   den Zug als Textauswahl. */
body.em-resizing { user-select: none; -webkit-user-select: none; cursor: ew-resize; }

/* ----------------------------------------------------------- Ablegen --
   Dieselben Marken, die auch das Umsortieren benutzt (blocks.js). */
#blocks-host .block.drop-before { box-shadow: -6px 0 0 -2px var(--action-primary); }
#blocks-host .block.drop-after  { box-shadow:  6px 0 0 -2px var(--action-primary); }
#blocks-host .block.dragging    { opacity: .45; }

/* Beim Ziehen aus der Bibliothek wird das Raster sichtbar – so ist erkennbar,
   dass die Breite auf Spalten einrastet. */
body.em-dragging #blocks-host { background-image: repeating-linear-gradient(to right, var(--accent-08) 0 calc(100% / 12 - 1px), transparent calc(100% / 12 - 1px) calc(100% / 12)); }

/* ========================================================================== */
/* 4. NAVIGATION SORTIEREN                                                    */
/* ========================================================================== */

.nav-grip {
  display: grid; place-items: center;
  width: 16px; height: 20px;
  margin-left: -6px;
  flex: none;
  color: var(--text-meta);
  cursor: grab;
  opacity: .65;
}
.nav-grip:hover { color: var(--text-heading); opacity: 1; }
.nav-grip:active { cursor: grabbing; }
.nav-grip svg { width: 11px; height: 11px; }

/* Ablagemarken. "davor"/"dahinter" als Kante, "hinein" als Fläche – die drei
   müssen sich auf einen Blick unterscheiden, sonst rät man beim Ablegen. */
[data-menu-id].nav-drop-before { box-shadow: 0 -2px 0 0 var(--action-primary); }
[data-menu-id].nav-drop-after  { box-shadow: 0  2px 0 0 var(--action-primary); }
[data-menu-id].nav-drop-into {
  background: var(--accent-16);
  outline: 1.5px dashed var(--action-primary);
  outline-offset: -1px;
  border-radius: var(--radius-xs);
}
/* Während des Ziehens keine Hover-Hervorhebung – sie würde mit den
   Ablagemarken um dieselbe Fläche konkurrieren. */
body.em-nav-dragging .sidebar [data-menu-id]:hover { background: transparent; }

/* ------------------------------------------------------------ "…"-Menü --
   Der Knopf am Menüpunkt. Er ersetzt die frühere Reihe aus bis zu fünf
   Symbolen und bleibt deshalb zurückhaltend, bis die Zeile berührt wird. */
.nav-menu-btn {
  font: var(--weight-bold) 15px / 1 var(--font-headline);
  letter-spacing: .04em;
  color: var(--text-meta);
}
.nav-menu-btn:hover { background: var(--ink-07); color: var(--text-heading); }

.em-navmenu {
  position: fixed;
  z-index: 95;              /* über Panel (40) und Formatleiste (90) */
  width: 236px;
  padding: var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-menu);
  animation: emPop .18s var(--ease-reveal) both;
}
.em-navmenu-cap {
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-card);
  font: var(--weight-bold) var(--text-label) / 1.3 var(--font-headline);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-meta);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-navmenu button {
  display: block; width: 100%;
  text-align: left;
  padding: 9px var(--space-4);
  border: none; border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-heading);
}
.em-navmenu button:hover:not(:disabled) { background: var(--ink-04); }
.em-navmenu button:disabled { opacity: .35; cursor: not-allowed; }
.em-navmenu button.is-danger { color: var(--danger); }
.em-navmenu button.is-danger:hover { background: var(--danger); color: var(--white); }

/* ========================================================================== */
/* 5. SCHWEBENDE FORMATLEISTE                                                 */
/* ========================================================================== */
/* Erscheint über markiertem Text. Die vollständige Werkzeugleiste bleibt
   erhalten, ist aber eingeklappt und wird über "⋯" aufgeklappt. */

.em-fmt {
  position: fixed;
  left: 0; top: 0;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-xs);
  background: var(--action-dark);
  box-shadow: 0 8px 24px rgba(55, 83, 116, 0.25);
  z-index: 90;   /* über der Werkzeugleiste (75) und dem Panel (40) */
}
.em-fmt.is-on { display: flex; animation: emPop .2s var(--ease-overshoot) both; }

.em-fmt-btn {
  min-width: 30px; height: 30px;
  padding: 0 var(--space-3);
  border: none; border-radius: var(--radius-xs);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font: var(--weight-bold) 12px / 1 var(--font-headline);
}
.em-fmt-btn:hover { background: rgba(255, 255, 255, .14); }
.em-fmt-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .15); flex: none; }

/* Die feste Werkzeugleiste ist im Bearbeitungsmodus DAUERHAFT sichtbar.

   Sie war eingeklappt und musste über "⋯" in der schwebenden Leiste geholt
   werden. Das kostete bei jedem Formatwechsel einen zusätzlichen Klick, und
   die aufgeklappte Leiste verschob den Inhalt unter sich – beim Schreiben
   sprang der Text. Dauerhaft sichtbar heißt: eine feste Höhe, die sich nicht
   ändert, und die Werkzeuge sind da, wo man sie sucht.

   Die Sichtbarkeit regelt damit wieder allein css/legacy.css
   (body.edit-mode .format-toolbar { display:flex }); hier steht keine Regel
   mehr dagegen. */

/* ========================================================================== */
/* 6. SCHMALE FENSTER                                                         */
/* ========================================================================== */
/* Unter 1100px nimmt das Panel zu viel Platz. Der Entwurf hält den
   Bearbeitungsmodus ohnehin dem Desktop vor; hier wird er nur nicht
   unbrauchbar, sondern legt das Panel über den Inhalt. */
@media (max-width: 1100px) {
  body.edit-panel-open .main { margin-right: 0; }
  .em-panel { box-shadow: -12px 0 36px rgba(55, 83, 116, 0.12); }
}