/* style.css */

/* Global box-sizing für konsistente Größenberechnung */
* {
  box-sizing: border-box;
}

/* Allgemeine Styles für html und body, um den gesamten Viewport zu füllen */
html, body {
  margin: 0;
  padding: 0;
  height: 100%; /* Stellt sicher, dass html und body die volle Viewport-Höhe einnehmen */
  font-family: sans-serif;
  overflow: hidden; /* Verhindert Scrollbalken auf der Hauptebene des Bodys */
  background-color: #F8F8F8; /* Optionale Hintergrundfarbe für den gesamten Body, falls gewünscht */
}

/* Body als Flex-Container, um Inhalte vertikal zu stapeln */
body {
  display: flex;
  flex-direction: column;
}

/* Optional: Style für die Überschrift im Output-Bereich und allgemeine Überschriften/Paragraphen */
h1, h2, p {
  margin: 0;
  padding: 10px 0; /* Beispiel: Etwas vertikale Polsterung, keine horizontalen Ränder */
  text-align: center; /* Überschriften zentrieren */
}

/* Styling für die Button-Leiste */
.button-bar {
  margin-bottom: 0; /* Rand unten entfernen */
  padding: 10px 0 0 0; /* Polsterung anpassen, um oberen Rand zu entfernen */
  text-align: center; /* Buttons zentrieren */
}

.button-bar button {
  margin: 0 5px; /* Kleiner Abstand zwischen den Buttons */
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #e0e0e0;
  cursor: pointer;
}

.button-bar button:hover {
  background-color: #d0d0d0;
}

/* Haupt-Container für Blockly-Workspace und Output-Bereich */
#container {
  display: flex; /* Machen Sie den Container zu einem Flex-Container, um die Kinder nebeneinander anzuordnen */
  flex-grow: 1; /* Lässt den Container den restlichen vertikalen Platz füllen */
  padding: 0; /* Polsterung um den Inhalt herum vollständig entfernen */
  box-sizing: border-box; /* Stellt sicher, dass Padding in der Größe enthalten ist */
}

/* Blockly-Workspace Bereich */
#blocklyDiv {
  flex-grow: 1; /* Lässt BlocklyDiv den maximalen horizontalen Platz einnehmen */
  min-width: 200px; /* Mindestbreite für Blockly, damit es nicht zu klein wird */
  height: 100%; /* Füllt die Höhe des #container */
  background-color: #FFF8E1; /* Sehr helles Beige für den Blockly-Hintergrund des Containers */
  margin: 0; /* Rand entfernen */
}

/* WICHTIG: Regel für den Blockly SVG-Hintergrund */
#blocklyDiv .blocklySvg {
  background-color: #FFF8E1; /* Hintergrundfarbe für das von Blockly generierte SVG-Element */
}

/* Optional: Sicherstellen, dass Blockly-Scrollbalken über anderen Elementen liegen */
#blocklyDiv .blocklyScrollbarHorizontal,
#blocklyDiv .blocklyScrollbarVertical {
    z-index: 100;
}

/* Flex-Container für Splitter und Output-Bereich */
#outputContainer {
  display: none; /* Standardmäßig ausgeblendet, wird bei Bedarf von JS eingeblendet */
  flex-shrink: 0; /* Verhindert, dass dieser Container schrumpft, wenn nicht im WebView */
  flex-basis: auto; /* Initial flexible Basis */
}

/* Splitter-Element */
#splitter {
  width: 8px; /* Breite des Splitters */
  background-color: #ccc; /* Farbe des Splitters */
  cursor: ew-resize; /* Zeigt den "Ost-West-Größenänderung"-Cursor */
  flex-shrink: 0; /* Verhindert, dass der Splitter schrumpft */
  margin-left: 0; /* Abstand zum Blockly-Bereich entfernen */
  margin-right: 0; /* Abstand zum Output-Bereich entfernen */
}

/* Output-Bereich (mit Code-Textarea) */
#outputArea {
  display: flex;
  flex-direction: column; /* Überschrift und Textarea vertikal stapeln */
  min-width: 200px; /* Mindestbreite für die OutputArea */
  width: 500px; /* Startbreite für den Output-Bereich, wird von JS überschrieben */
  box-sizing: border-box;
  margin: 0; /* Rand entfernen */
}

/* Textarea für den generierten Code */
#codeOutput {
  flex-grow: 1; /* Lässt die Textarea die verbleibende Höhe in outputArea füllen */
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  white-space: pre-wrap;
  border: none; /* Deaktiviert den Rand der Textarea */
  resize: none; /* Deaktiviert die eingebaute Resize-Funktion der Textarea */
  overflow: auto; /* Notwendig, damit Scrollbalken erscheinen, wenn der Inhalt die Größe überschreitet */
  padding: 10px; /* Optional: Innenabstand für den Text, damit er nicht direkt am Rand klebt */
}